Tastatur schiebt den Bildschirm nach oben ionen 2

Question

Ich entwickle eine ionic 2 App. Der HTML-Code meiner Login-Seite ist die folgende:

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

Ich weiß nicht, warum, aber wenn ich die App in einem Android-Gerät laufen zunächst der Bildschirm gut aussieht, aber wenn ich den Benutzernamen Eingabe klicken, Die Tastatur erscheint und schiebt den Bildschirm nach oben. Ich zeige Ihnen zwei Bilder, eines, wenn nichts ausgewählt ist, und ein anderes, wenn ich auf den Benutzernamen klicke.

Normal Screen

Input clicked

Jede Idee?

Answer 1

Ich habe Erfolg tut das hat folgende:

1.) Werfen Inhalte, die Sie nicht wollen, innerhalb eines Ionen festen Behälter blättern:

<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.) Ich habe auch gelesen, die Der Wechsel von Ioneneingabe zu Standardeingabeelement behebt einige Tastaturprobleme.