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 Field although in this case it occurs in HTML5, not native application.

More precisely: when the input field is fully covered by keyboard, a whole page is scrolled and this field become visible - that's OK. But if this input was on the edge of visible area (after keyboard appears), my soft keyboard overlaps it and page won't scroll at all. The page will be scrolled just after typing a first sign.

My customer doesn't like this behaviour... It occurs for sure on Galaxy Tab 10" - Android 4.0.3, Lenovo Tablet - Android 3.1.

I have tried setting input's height, using box-sizing:border-box;, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; and few more, but nothing worked.

Have you got any idea? I would prefer CSS solutions, javascript page scrolling is not an answer for me in this case (customer requirements).

Maybe it's just an Android Web Browser bug with no workarounds or some specific problem due to some of input's parents' style (I've already tried removing all position: absolute properties)?

All suggestions are welcome.

Answer 1

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.

Answer 2

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();
});