CODEWITHSUNDEEP
javascriptcssiphonemobile-safari
Rohit Agrawal
Rohit Agrawal

Reputation: 1521

Page scrolls up in virtual keyboard's presence in iphone

I have a chatting application page in my website. The main container takes full height and width on mobile devices. The container has position: fixed and 3 divs inside it have position:absolute. The last div #app-msg-composer has a textarea and send button inside it like other chat applications. Below is the brief code:

<div id='app-container'>
    <div id='app-header'></div>
    <div id='app-body'></div>
    <div id='app-msg-composer'>
         <textarea></textarea>
         <button>Send</button>
    </div>
</div>

#app-container{
    position: fixed;
    height:100%;
    width:100%;
    top: 0px;
    bottom:0px;
}
#app-header{
    position:absolute;
    height:48px;
    width:100%;
    top:0px;
}
#app-body{
    position:absolute;
    top:48px;
    bottom: 74px;
    width:100%;
}
#app-msg-composer{
    position:absolute;
    bottom:0px;
    height:74px;
    width:100%;
}

As the textarea is clicked and comes to focus, the presence of the virtual keyboard makes the upper half of the page to scroll up(out of the viewport). This issue is with iPhone only as it is working fine on other android devices. I searched about this issue and found that it is a common issue in iphone because:

On iPhone, the virtual keyboard's presence does not change the viewport height.

I tried some solutions from stackoverflow but did not work. How to do this in javascript or css only as I am not using any library?

Upvotes: 6

Views: 2420

Answers (1)

user9107868
user9107868

Reputation:

You need to change the CSS property position to fixed. That way, it is literally "fixed". It also can not be moved by the screen changing size.

An alternative method is to simply align it to the very top of the screen. This should be done to keep the tip element at the top, the middle in the middle...

Upvotes: 0

Related Questions