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 abs

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.