html - input textbox hidden behind keyboard on android Chrome

Question

I have a mobile web page of the following format:

header - logo etc - absolute positioned

content - scrollable, absolute positioned

footer, 40px absolute positioned

The content area has multiple input boxes. On Chrome on Android, tapping on an input box at the bottom of the page causes the input to not be in view when the soft keyboard pops up. The page does scroll to try and move the box up, but not enough to actually be visible. It ends up hiding behind the footer.

Any idea how to fix this? This occurs only on Chrome-Android. Safari on iOS and IE on Windows Phone and other mobile browsers work just fine.

Answer 1

I was hoping for a CSS only solutions, but I don't think there is one. Gaunt Face's answer is a good way of doing it. Unfortunately in my case, this would require a few changes and has the possibility of breaking automation among other things (since the url has #targets added to it).

I solved this by changing the position type in 2 click handlers.

I have a click handler for any input/textarea field. In that click handler, I change the position style of the form container div to be static. Note this will push the footer to the bottom if the container field has a scrollbar. This, in my case is not a problem as when the keyboard pops up, only a couple of fields are visible. The user cannot visibly see any difference.

I have a second handler for when the user clicks out of an input field - page click handler - where I restore the the position type to absolute, making the page appear just as it was before.

This has one unintended consequence - The scroll position is lost. I fixed this by getting the offset of the input field and calling scrollTop on the parent div with that offset, thus restoring the position.

I've seen a few questions about this, but did not find an answer. I hope this helps someone.