We have a modern login form which we would like center vertically and horizontally, on browser anything is working fine, and also on mobile devices the form is styled well.
I’m doing this having an ion-content, ion-grid and ion-row which has 100% height and width. Then I center the row and content using align-items-center and justify-content-center
<ion-content no-padding class="login-content">
<ion-grid no-padding class="login-grid">
<ion-row class="login-row" align-items-center justify-content-center>
<ion-col>
<ion-card class="login-card">
......
It looks like that
The problem is, if the keyboard is raising up the top of the login form is hidden and we can not scroll up to the begin of the login form.
But there is no reason why the top of the form is hidden, it should be shown all because there is enough space for it.
So the question is which is the best way to center a form on page where rising up the keyboard does not hide the form.