Android HTML5 - soft keyboard overlaps input field

Question

I\'m a bit tired looking for a solution for overlapping input field by soft keyboard on Android. My problem is very similiar to this one: Soft Keyboard Overlapping with EditText

Answer 1

The simplest way to solve this android nasty (and now in ios7 too) is to use the inputs focus and blur events. If you are not using the footer tag just replace it with the class of your footer element.

In jQuery:

$("input").focus(function(){
    $('footer').hide();
});

$("input").blur(function(){
    $('footer').show();
});

Answer 2

I had this annoying issue, related to my css framework - mobile-angular-ui. So it's known bug on internet, and I spent hours on searching for fix on web,but unfortunately none of proposed solutions solved my particular case. At last I did some testing, and it turned out that this behaviour is caused by framework I used. (I did report it to mobile-angular-ui authors, but I didn't get response.) You probably want to do few tests, as I did, to find out if this issue is related to architecture of your app, really. Comment out all the css code and start from blank, pure html page with forms on it. If all's fine (form should scroll up to show in visible part of view, above of soft keyboard) when your css is commented out/switched off, your issue lies in css, just like in my case. For those who use mobile-angular-ui in their apps, and get into this issue, this piece of code did the job for me:

html {
    overflow: auto;
}
body {
    height:auto;
    overflow: auto;
}
.scrollable {
    position:inherit;
}

The rest depends on your particular case.

I hope this helps.