2

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 !

Ernoud Dylan
  • 111
  • 1
  • 4

1 Answers1

0

My suggestion would be to divide your CSS into two sections, one below very square-ish aspect ratio (like 1:1, you have to see what resolution you get on what aspect ratios) and set logo's display to none (that is pretty common solution while keyboard is visible).

If you don't know how to do this, see read here about @media query.

Another option (if you don't want to use @media query) is to listen for input's focus and blur events (focus means that input is selected, blur means that it is no longer selected) and toggle logo using javascript.

Kamil Bęben
  • 1,064
  • 8
  • 12