Dr.Random Posts - Answer Overflow

Dr.Random

Posts Comments

KPCKevin Powell - Community

•Created by Dr.Random on 6/2/2023 in #front-end

Mobile virtual-keyboard pushes up content

3 replies

KPCKevin Powell - Community

•Created by Dr.Random on 5/14/2023 in #front-end

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

36 replies

KPCKevin Powell - Community

•Created by Dr.Random on 3/24/2023 in #front-end

Website jumps around when virtual keyboard is up

20 replies

Gaming

Programming