So, I have been trying to implement a landing page for mobile view that you can see here : https://i.stack.imgur.com/Gduw3.png It works fine so far.
But as soon as the user wants to introduce his username and password, the keyboard from Android appears and my problem appears as you can see here : https://i.stack.imgur.com/JLCmh.png
My elements (the logo and the form) are placed via absolute position to keep the layout in place whatever the screen size is. I suspect this is my main issue.
Here is a really really quick pen to showcase what the problem is all about : https://codepen.io/Gallow/full/BeLWVG ( https://codepen.io/Gallow/pen/BeLWVG to see the quick code )
In order to make the android keyboard appear, you have to enable Toogle Device Toolbar from the chrome debug menu, then click to choose a device and click edit.
From there, a list will open and check Nexus 5X. The procedure is described here : How to bring up mobile keyboard in chrome dev tools? To toggle the keyboard, just click on the screen options (to change orientation) and pick Portrait - Keyboard
I think this might be the code in cause : (you can see the same code in the pen as well)
.logo
{
position : absolute;
z-index: 100;
width: 80%;
left: 10%;
top: 7.5%;
}
.container__action
{
position: absolute;
z-index: 100;
bottom: 5%;
width: 80%;
left : 10%;
text-align: center;
}
As you can see, everything is placed via absolute. As the keyboard appear, the size of the body decrease dramatically which cause the form to move up and place himself in front of the logo.
I can't find a proper way to apply this layout without using absolute to place the element, while making it works when the keyboard lower the size of the body.
Thanks a lot !