35 replies

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

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" />

    <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

...

Web app pushes entire content up when virtual keyboard is up

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

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

    <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" />

    <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

...

Web app pushes entire content up when virtual keyboard is up

Web app pushes entire content up when virtual keyboard is up

Similar Threads

Similar Threads

Similar Threads