Menu
I'm making a website with 3 drawers - elements that are absolutely positioned off screen, one on the left, one on the right and one on the bottom.
Have a look at the website here to see what I'm talking about https://sjbuysse.github.io/javascriting/index.html
Click on the bottom Pop up! toggle, and you'll see a div with some inputs show up. As usual, when you click on one of these inputs in your mobile browser, a keyboard is displayed, which in result will resize the website. This is no problem on my website when the input high enough on the screen (above the keyboard). But if I didn't scroll down as much, and the keyboard pops up above the selected input element, my whole website is being pushed up, and some blank space is created under my <html> content. Even after I close the keyboard, that blank space stays there.
I will show you with screenshots what I mean:
Situation 1: When the input is high enough to be above the keyboard, no problem.
Situation 2: When the input is not high enough on the screen, and the keyboard will pop over it, The websites content gets pushed up
The blank space stays in the website even after I hide the keyboard
After a whole lot of debugging I singled out the cause for this issue: The right-hand drawer on my website (the one you can toggle open with the + sign) somehow is causing this issue by being positioned absolutely. The css for this drawer looks like this:
.create-drawer {
height: 100vh;
text-align: left;
color: #EEE;
width: 200px;
background-color: #1C262F;
position: absolute;
top: 0;
transition: transform 0.3s ease-out;
z-index: 2;
box-sizing: border-box;
right: 0;
transform: translate(200px, 0);
}
Simply by commenting out the position: absolute line, the problem is fixed.
Can someone explain this to me?
Also, The left-hand drawer (with the filter symbol) has the exact same css (except that it's positioned left), and does not interfere with anything. I would also love to understand how that's possible.
487
Going to settings app and selecting Apps & notifications:And finally clicking on Android Keyboard (AOSP) entry in the app list: Clicking on Disable button and confirming in a pop-up dialog will disable on-screen android keyboard from appearing when trying to type.
For future readers who struggle with moving absolutely positioned elements:
I solved this problem by defining the position of the parent container (body) to relative.
For some reason I thought this was the default value, but it's not.
So if you have weird stuff happening with absolute positioned elements, make sure the containers position is defined (to something else than static)
144
For anyone still having issues with this: The size of any viewport based/percentage element will change when the virtual keyboard is invoked (Android). One fix is to get the size of the current inner window height (in px) and then use that as the height of the element that you want to remain constant on keyboard popup.
Using jQuery:
$(document).ready(function() {
/* ... */
var windowHeight = $(window).innerHeight();
$('body').css({'height':windowHeight});
/* ... */
});
Refer to this SO question Mobile keyboard changes html viewport size
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
