I try to design a login screen with Ionic and my fields are in center of my page. When I select an input, I want to scroll up the screen to keep my field and my login button in the center of the app screen.
I have this what is in 1, and I want the 2

I really don't know how to do that.
There is my html code :
<ion-content class="login-page-background">
<div class="content-login">
<img src="assets/images/logo-yellow.svg" width="70%"><br><br>
<div>
<div class="login-information-bloc">
<input placeholder="{{this.translate.get('...')}}" (select)="scrollUp()" class="input-login"/>
<input type="password" placeholder="{{this.translate.get('...')}}" class="input-login"/><br>
<p class="password-forgot">{{this.translate.get('...')}}</p>
</div>
<button (click)="login()" ion-button color="secondary">
<label>{{this.translate.get('...')}}</label>
</button>
</div>
<div class="flag-bloc">
<p>{{this.translate.get('...')}}</p>
<img src="assets/images/fr.svg" (click)="changeCountry('fr')" [ngClass]="{'flag-button' : this.fr_selected}" width="55px" style="margin: 0px 10px 0px 10px">
<img src="assets/images/ch.svg" (click)="changeCountry('ch')" [ngClass]="{'flag-button' : this.ch_selected}" width="55px" style="margin: 0px 10px 0px 10px">
</div>
</div>
</ion-content>
If you inspect the html you'll notice that ion-content has a fixed-content and scroll-content children. So, when the keyboard is opened, scroll-content will automatically resize to the new screen real estate.
With that said, I dont know what is within all your css classes, but I would recommend not having any fixed heights on your container classes. That way when the content resizes, your elements should fit to the new shorter container size.
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