Android OS Keyboard moves Website Contents Up?

Question

I have a mobile website with 4 elements that are absolutely positioned inside a 100% height div and when I click on the url bar the height on the div shrinks and pushes everything up.

Is there anyway to fix this issue? Or prevent it from changing the 100%? Or do I need to get the screen size using JS and fix it that way? As it works fine if I set it to an exact amount.

score 8 · Accepted Answer · answered Mar 01 '12 at 20:35

8

The android browser resizes the window when the keyboard is opened, there is no solution to prevent that.

answered Mar 01 '12 at 20:35

ChristopheCVB

7,269
1
29
54

2

So that stands to reason that the only way to prevent this issue is to manually assign the height property. Okay – Steven Mar 01 '12 at 20:37
Alternatively, couldn't you grab the viewport height *upon page load*, set it as a constant, then only refer to that constant? – zelusp Aug 26 '16 at 17:47

score 5 · Answer 2 · answered Jul 05 '12 at 01:28

I was able to solve this by setting the z-index to -1 for the DOM element that gets in the way when the Android browser pops up the keyboard on the screen, as follows:

function hideNavbar() // needed for Android browser pushing up keyboard
{ 
    if (screen.height <= 480) // mobile
    {
        document.getElementById('navbar').style.zIndex = "-1";
    }
}

(I did this for an onclick event in the input text box), then, using an 'onblur' (i.e. when the user clicks out of the text/search box at the top of the screen), return the zindex of the navbar to '1':

function showNavbar() // needed for Android browser pushing up keyboard
{
    if (screen.height <= 480) // mobile
    {
        document.getElementById('navbar').style.zIndex = "1";
    }
}

score 2 · Answer 3 · answered Dec 10 '18 at 11:38

Similar to Charlie Carver, except using max-height and display:none

Tested on Galaxy S7 and iPhone 6s

.hide-element-on-keyboard {
    display:normal;
}

@media screen and (max-height: 550px) {
    .hide-element-on-keyboard {
        display: none;
    }
}

score 1 · Answer 4 · answered Nov 04 '17 at 02:08

1

Answer of Kevin Pajak worked for me. you can also use media queries:

your.css file:

.hide-element-on-keyboard {
    z-index: 1;
}

@media screen and (min-height: 300px) {
    .hide-element-on-keyboard {
        z-index: -1;
    }
}

answered Nov 04 '17 at 02:08

salgmachine

519
1
3
14

Firsake · Answer 5 · 2021-06-01T01:13:16.570

0

I had a webview inside a LinearLayout and tried all solutions but this example worked. Added this snippet under the my activity of interest in the AndroidManifest.xml file.

android:windowSoftInputMode="adjustPan|stateAlwaysHidden"

edited Jun 01 '21 at 01:13

answered Jun 01 '21 at 01:07

Firsake

71
5

Android OS Keyboard moves Website Contents Up?

5 Answers5