Ionic3 keyboard crash my grid

Ionic Framework ionic-v3
1

Hi all ! Could someone suggest please … when keyboard is called, it crash my grid … throws the elements to the top … Is it possible to fix ? Make that when you call the keyboard, the elements do not jumping …

image
example_keybord.jpg487×744 60.2 KB 

<ion-content padding>
  <ion-grid >
    <ion-row class="login_row1">
      <ion-col>
        <div class="greeting">
          <h2 text-center>Welcome!</h2>
          <button ion-button class="btn-crt-acc" (click)="newAcc()" outline>New Account</button>
        </div>
        <div>
          <h4 text-center class="login_first_page">Log in</h4>
        </div>
        <img class="login_image_landscape" id="login_image_landscape" src="assets/background_images/login_landscape.png">
        <form class="login_form" #loginForm="ngForm">
          <ion-list class="list_login">
            <ion-item>
              <ion-label stacked primary>username</ion-label>
              <ion-input [(ngModel)]="loginData.username" name="username" spellcheck="false" #loginData.username="ngModel" type="text" value="" required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label stacked primary>password</ion-label>
              <ion-input [(ngModel)]="loginData.password" name="password" spellcheck="false" #loginData.username="ngModel" type="password" value="" required></ion-input>
            </ion-item>
            <ion-item text-center class="download_all login_page remember_password portrait_remember_password">
              <ion-label class="greeting_download">Remember password</ion-label>
              <ion-checkbox text-center [(ngModel)]="loginData.passRem" name="passRem"></ion-checkbox>
            </ion-item>
            <div>
              <button ion-button class="btn-help" (click)="help()">Help</button>
              <ion-item text-center class="download_all login_page remember_password landscape_remember_password">
                <ion-label class="greeting_download">Remember password</ion-label>
                <ion-checkbox text-center [(ngModel)]="loginData.passRem" name="passRem"></ion-checkbox>
              </ion-item>
              <button ion-button class="btn-login" (click)="login(loginForm)">Next</button>
            </div>
          </ion-list>
        </form>
      </ion-col>
    </ion-row>
    <ion-row class="login_row5">
      <ion-col align-self-center class="ion-col_login_page">
        <img class="login_image_portrait" src="assets/background_images/login_portrait.png">
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>
2

Have you tried this:


(method) Keyboard.disableScroll(disable: boolean): void
Prevents the native UIScrollView from moving when an input is focused.
3

Alexmady, trying to call in app.component … but nothing happend … when I called keybord scroll is appears …

platform.ready().then(() => {
      this.keyboard.disableScroll(true);
    });
4

What does it look like before you open the keyboard?

5

Sujan12,Something like this …