Help with a login screen design. Bottom content


I’m trying to develop a login template where a “forgot button” is positioned on the bottom of the screen.

On the top of the screen there is a conpany logo and in the center the user and password ion-inputs.

First I,ve put the logo and inputs into the ion-content and the forgot button into a ion-footer but the problem is when i focus on a input the keyboard appears it push up the footer hidding the content of the ion-content with the content of the footer.

Second i’ve tried to put two divs into the ion-content, the main div with a 90% height and the other with a 10% height. Same result.

Wich would be a useful design to maintain the footer under the keyboard and rhen when i do scroll it appears?


What is the device you using ? Android or IOS ?

Cordova-android 6.4.0

Can you provide a screenshot ?

Like this:

And with the keyboard opened ?

Like this:

Other question is that when the keyboard is open reduces the percentage heights of the dom elements. Is not recommendable to use percentages on design?

Did you find a solution or not?