0
188
ViewsHow to dynamically adjust the height of a scrollable div when the keyboard is shown and dismissed on the mobile browser?
I have a scrollable div in the web page; it contains a list of elements that can be scrolled up and down.
On the mobile browser (such as Chrome on Android, Safari on iOS), when the keyboard is displayed, the problem I have is the bottom elements in the scrollable div are covered by the keyboard, and scrolling up cannot show all the elements above keyboard. There are always a couple of elements below the top edge of the keyboard.
What I want is:
- the div adjusts its height when the keyboard is shown, and always above the top edge of the keyboard, so the list will not be covered by the keyboard. As demonstrated by "height 1" in the draft screenshot.
- And when the keyboard is dismissed, I want the div height go back to full screen again. As demonstrated by "height 2" in the draft.
I tried to use window.visualViewport.height or window.innerHeight to retrieve the visible height, but the value seems not right.
Does anyone knows the correct way to listen to the keyboard show/dismiss event, and knows how to correctly adjust the height of the div?
1 answers
Answer question0
I'm not sure there is a good way to do this with css only. it might be possible to use a media query and do something like
@media screen and (orientation: landscape) {
.scroll_div{height: 50% !important;}
}
Not sure that will work on all devices, because not all mobile devices switch to landscape when the kb is raised.
Another posibility with css might be to do something like
@media all and (max-height: 700px) {
.scroll_div{height: 50%;}
}
I chose 50% but that also might not work in your application. You can set a static value you know to be an acceptable height for your uses when the kb is displayed.
I could see a jquery option might look something like
$document.ready(function(){
$kb_shown = false;
$scrollDivHeight = $('.scroll_div').height();
$(window).resize(function(){
if(kb_shown == false){
$('.scroll_div').height($scrollDivHeight / 2));
$kb_shown = true;
}
else{
$('.scroll_div').height($scrollDivHeight);
$kb_shown = false;
}
});
});
I also use browserstack.com so that I can test things such as this on any/every mobile device I choose. Saves from having to keep a bucket of mobile devices around.
As far as I know, there is no way to detect the kb event directly, as it is part of the os and not the browser.
Hope this helps point you in the right direction. Let me know if you have any further questions.
Edit: There are some mobile responsive frameworks out there that already handle this like boostrap, Skeleton, Boilerplate, and many more.