Search code examples
cssangularionic2

Scroll up when keyboard is open Ionic 2

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

enter image description here

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>
Solution

  • 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.