CODEWITHSUNDEEP
androidhtmlgoogle-chromemobile
Aniket
Aniket

Reputation: 1376

input textbox hidden behind keyboard on android Chrome

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.

Upvotes: 30

Views: 63896

Answers (7)

Pawan Kotak
Pawan Kotak

Reputation: 300

I used scrollIntoView to solve this issue. 

$(document).on('focus', selector, function() {
    document.querySelector(selector).scrollIntoView();
});

Upvotes: 3

Danilo Ribeiro
Danilo Ribeiro

Reputation: 99

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

Upvotes: 8

bornSwift
bornSwift

Reputation: 346

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

Upvotes: 7

Alberto Perez
Alberto Perez

Reputation: 1077

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;

    }
}

Upvotes: 5

chuhai
chuhai

Reputation: 1

If you use jQuery, you can use the codes as follow:

$('body').on('focusin', 'input, textarea', function(event) {
  if(navigator.userAgent.indexOf('Android') > -1 && ...){
   var scroll = $(this).offset();
   window.scrollTo(0, scroll);
 }
});

Though, the bug should be solved now.

Upvotes: 0

Matt Gaunt
Matt Gaunt

Reputation: 9821

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.

Upvotes: 8

Aniket
Aniket

Reputation: 1376

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.

Upvotes: 8

Related Questions