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.

Solution 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.

Solution 2

There are a few ways you could solve this, the most obvious solution is to use javascript to set a hash on the URL.

You can see an example of that here: http://jsbin.com/emumeb/24/quiet Code: http://jsbin.com/emumeb/24/edit

For a slightly more complex example, if you have a fixed header and footer, you might want to use targets to change the appearance of the page when a hash is set.

Depending on your layout you might need to get a little more creative, you could set a class on the body for focused vs non focused state and change the UI accordingly, but it starts to get tricky to maintain a good experience across mobile, desktop etc

Heres an example http://jsbin.com/emumeb/30/quiet Code: http://jsbin.com/emumeb/30/edit

Obviously this is something chrome should deal with itself (similar to the UX iOS has), so I've raised a bug against Chrome - https://code.google.com/p/chromium/issues/detail?id=270018&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified.

Solution 3

I'm not smart like you guys,

So I took a ruler and measured the size of my cell phone screen. 2nd Then measured the size of the keyboard

I noticed that the keyboard occupied 38% of the screen.

So I put a div in the footer and called it affectionately frog.

and I used this code:

 $('body').on('focus', 'input, textarea', function(event) {
        var altura = $(window).height();
        var scrollp = parseInt(parseInt(altura)/100*38);
        $("#divSapo").css("height",scrollp + "px");
        window.scrollTo(0,document.body.scrollHeight);
    });

Solution 4

Changing from absolute positioning to fixed positioning should fix the issue. Absolute positions the element with respect to the initial page-size during page load (adding a keyboard shrinks the visible page). Fixed positions the element with respect to the current page-size, keeping the element above the keyboard.

#myElement {
  position: fixed;
  bottom: 2em;
}

Solution 5

I found a CSS solution that works very well.

You can do a css query for a window screen of 300px height o less, that is the mostly screen height of phones with the software keyboard displayed. It works very fast and very well. For example

@media screen and (max-height: 300px) {

    #myinputtext{
        position: absolute; 
        top: 50px;

    }
}

View more solutions