CODEWITHSUNDEEP
javascriptcsspositioncross-platform
Ori Refael
Ori Refael

Reputation: 3018

CSS - Android keyboard push up elements

I have a div with position:relative. Within this div there is another divwith position:absolute.

I also limited the screen to be 800 * 600px. When I open my web on Android OS (tried Chrome browser there), it seems that whenever the keyboard pops up it pushes the entire view.

So my question is, is there any way to control it? from what I know, it seems like there is no control by JavaScript or jQuery, CSS im still 99% sure there isn't. So, am I right?

Upvotes: 3

Views: 2394

Answers (2)

undefinedtoken
undefinedtoken

Reputation: 931

Hide the div in phone which pushes up by using 

@media screen and (max-height: 480px){
    div{
        display: none;
    }
}

So whenever the keyboard becomes active, that particular element won't appear.

Upvotes: 3

ramod8
ramod8

Reputation: 1

I dont think you can prevent the keyboard from pushing up the view. Generally, the browser would decrease the height of the window causing some elements to be pushed up out of view. It does this to try and get the focused text field in view and not hidden behind the keyboard.

I solved this problem by using javascript to attach a handler to the text input or textarea focus event. I then change the scrollTop value of the body to 0, which then scrolls the elements back into view.

Here is the solution implemented in AngularJS.

element.focus(function() { //focus event handler

                $timeout( function(){

                    angular.element(document.querySelectorAll("body")).scrollTop( 0 ); //scroll body back

                    },1000);

                });

A slight delay is needed as the keyboard takes time to pop up after the field is focused.

Upvotes: 0

Related Questions