Keyboard pushes the screen up ionic 2

Question

I'm developing an ionic 2 app. The html code of my login page is the following one:

<ion-header>
  <ion-navbar color="royal">
    <ion-title> Inicio de sesión </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="fondo">

  <img src="assets/markerBoy.png" class="logo"/>

  <ion-card center>

    <ion-card-header>
      Credenciales
    </ion-card-header>

    <ion-card-content>
      <form>
        <ion-list>
          <ion-item>
            <ion-label floating> Usuario: </ion-label>
            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating> Contraseña: </ion-label>
            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
          </ion-item>
        </ion-list>
        <div padding>
          <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
        </div>
      </form>
    </ion-card-content>

  </ion-card>

</ion-content>

I don't know why but when I run the app in an android device at first the screen looks right but when I click in the username input, the keyboard appears and pushes up the screen. I'll show you two images, one when nothing is selected and another when I click in the username input.

Normal Screen

Input clicked

Any idea?

Answer 1

I've had success doing the following:

1.) Throwing content you dont want to scroll within a ion-fixed container:

<ion-content class="fondo">
    <div ion-fixed>
        <img src="assets/markerBoy.png" class="logo" />

        <ion-card center>

            <ion-card-header>
                Credenciales
            </ion-card-header>

            <ion-card-content>
                <form>
                    <ion-list>
                        <ion-item>
                            <ion-label floating> Usuario: </ion-label>
                            <ion-input type="text" [(ngModel)]="user" name="user"> </ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating> Contraseña: </ion-label>
                            <ion-input type="password" [(ngModel)]="password" name="password"> </ion-input>
                        </ion-item>
                    </ion-list>
                    <div padding>
                        <button ion-button block (click)="iniciarSesionValidar()" color="royal"> Entrar </button>
                    </div>
                </form>
            </ion-card-content>

        </ion-card>
    </div>
</ion-content>

2.) I've also read the changing from ion-input to the standard input element fixes some keyboard issues.