Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
35 replies
Dr.Random

Web app pushes entire content up when virtual keyboard is up

Hi! I have a really easy layout.

Header
Body
Footer

This is a chat application. Footer contains a textarea where a user can write, header some menu elem and the body contains the chat messages.
When a user clicks on the textarea, the entire page is pushed up so i can't see my header.

Here is the codepen link demonstrating the problem: https://codepen.io/drrandom/pen/poxKKNx

I have applied a javascript fix which partially works.

var body = document.querySelector("body");
if (window && window.visualViewport){
    visualViewport.addEventListener('resize', function(){
        let viewHeight = visualViewport.height;
        body.style.height = `${viewHeight}px`;
    });
}


This "fix" will set my body height whenever the viewport changes. This get's the job done, but now i can scroll the part outside of the body tag.
And the user can scroll down below the footer. I can't set the position or the overflow since the user is able to scroll the document which i can not reach from neither css or js.

I will post a video about the problem.

My meta tags:

    <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
CodePenDr.Random
Virtual keyboard demonstration
...
Virtual keyboard demonstration
Was this page helpful?