Processing
 

input textbox hidden behind keyboard on android Chrome

07/08/2013 18:21#1

Aniket

Member

Joined at: 12 months ago

Post: 19

Thank: 0

Thanked: 0

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 WP and other mobile browsers work just fine.

08/08/2013 11:00Top#2

Joined at: 11 months ago

Post: 25

Thank: 0

Thanked: 0

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.

08/08/2013 15:47Top#3

Aniket

Member

Joined at: 12 months ago

Post: 19

Thank: 0

Thanked: 0

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.

17/12/2015 02:45Top#4

chuhai

Member

Joined at: 9 months ago

Post: 1

Thank: 0

Thanked: 0

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.

09/05/2016 08:21Top#5

Joined at: 9 months ago

Post: 1

Thank: 0

Thanked: 0

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;      } } 
22/06/2016 18:09Top#6

bornSwift

Member

Joined at: 9 months ago

Post: 1

Thank: 0

Thanked: 0

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

Chrome, THREE.js: Cross-origin image load denied

5 years ago - Reply: 5 - Views: 271

Prevent Google Chrome Log XMLHttpRequest

3 years ago - Reply: 5 - Views: 277

How can I include ChromeDriver in a JAR?

3 years ago - Reply: 3 - Views: 83

Chrome geolocation not working on any site

3 years ago - Reply: 1 - Views: 49

wrong borders' width in android browser

3 years ago - Reply: 4 - Views: 207

Uncaught SyntaxError: Unexpected token < On Chrome

3 years ago - Reply: 10 - Views: 472

Flashdata not getting cleared in Codeigniter

4 years ago - Reply: 5 - Views: 58

Illegal access Javascript error in Chrome

3 years ago - Reply: 1 - Views: 53

ng-repeat not updating in Chrome

3 years ago - Reply: 1 - Views: 82

Applying border to a checkbox in Chrome

4 years ago - Reply: 2 - Views: 119

open browser plugin using access vba

3 years ago - Reply: 1 - Views: 26

vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re vé máy bay vé máy bay giá rẻ ve may bay ve may bay gia re