Attempting to create a login screen using Ionic where my fields are centered on the page. When I tap on an input field, I want the screen to scroll up to ensure that both the field and the login button remain in the center of the application screen.
I currently have what is described in 1, but I am aiming for 2.
https://i.sstatic.net/iDfAl.png
I am unsure how to achieve this.
Below 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>