I read several articles and stackoverflow questions about this issue. When i click on an input and the virtual keyboard shows up on mobile, my entire page is pushed up and i can't see the header.
I have a basic chat page which looks somewhat like this:
HTML
<body>
<div class="chat-header">
</div>
<div class="chat-body">
<div class="message">1</div>
<div class="message">2</div>
<div class="message">3</div>
...
</div>
<div class="chat-footer">
<input id="input"/>
</div>
</body>
I have this meta tag on my page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS
body{
display: flex;
flex-direction: column;
width: 100%;
height: 100svh;
}
.chat-body{
flex-grow: 1;
}
This css makes it easy to position my header and footer to the top and to the bottom while the body grows to full height.
I have tried several hacks and different positions.
I have tried
- Body fixed.
- Body relative with rest is absolute
Js tricks like this one
var myInput = document.querySelector( "#input" );
var myContainer = document.querySelector( "body" );
myInput.addEventListener( 'focus', function() {
var displayHeight = window.innerHeight - myContainer.scrollTop;
myContainer.style.height = displayHeight + "px";
}, true );
myInput.addEventListener( 'blur', function() {
myContainer.style.height = "100%";
}, true );
Which almost works is this one:
var body = document.querySelector("body");
if (window && window.visualViewport){
visualViewport.addEventListener('resize', function(){
let viewHeight = visualViewport.height;
body.style.height = `${viewHeight}px`;
scrollToBottomElem.click();
});
}
This resizes my body so it always takes up the full height but the page is scrollable to the bottom, below my body if i scrolled to the bottom of my chat-body.
I have read this https://rdavis.io/articles/dealing-with-the-visual-viewport and this Prevent virtual keyboard from pushing content up
But nothing works.
Here is a demo on codepen: https://codepen.io/drrandom/pen/poxKKNx
I really appreciate any comment on this.
from Web app pushes entire content up when virtual keyboard is up
No comments:
Post a Comment