CODEWITHSUNDEEP
androidhtmlcss
Steven
Steven

Reputation: 13975

Android OS Keyboard moves Website Contents Up?

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.

Upvotes: 10

Views: 12499

Answers (5)

Firsake
Firsake

Reputation: 71

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"

Upvotes: 0

N. Baxter
N. Baxter

Reputation: 21

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

Upvotes: 2

salgmachine
salgmachine

Reputation: 529

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

Upvotes: 1

Kevin Pajak
Kevin Pajak

Reputation: 291

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

Upvotes: 5

ChristopheCVB
ChristopheCVB

Reputation: 7315

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

Upvotes: 8

Related Questions