web-dev-qa-db-fra.com

Ionic 3 - Le clavier pousse le contenu vers le haut et sur d'autres contenus, sans raison

Je travaille sur une application simple en Ionic.

J'ai un problème que le clavier pousse mon champ de saisie vers le haut et sur une autre div alors qu'il y a suffisamment d'espace pour leur clavier. Comment puis-je réparer ça? J'ai déjà regardé autour de moi sur Internet mais je n'ai pas trouvé de solution à mon problème.

Voici ce qui se passe:

App

Comme vous pouvez le voir, le texte est dans l'image et il n'y a aucune raison qu'il soit si haut. Il y a plus que suffisamment d'espace en dessous.

Voici mon code:

HTML:

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="login content">

  <div class="logo-container">
      <img src="assets/imgs/Mikos_logo.jpeg" class="logo-img">
  </div>

  <div class="center">
      <p>Vul hier je naam in:</p>
      <ion-item class="code-field">
          <ion-input placeholder="naam" type="text" (keyup)="nameInput()" [(ngModel)]="name"></ion-input>
      </ion-item>      
  </div>



</ion-content>

CSS:

page-login {

    .login {
        background-color: #EEEEEE;
    }

    .logo-container{
        position: absolute;
        width: 400px;
        left: calc(50% - 400px / 2);
      }

      .logo-img{
        display: block;
        width: 100%;
        height: auto;
      }

    .center{
        position: absolute;
        top: 40%;
        width: 300px;
        left: calc(50% - 300px / 2);
    }

    @media only screen and (max-width: 600px) {
    /* For mobile phones: */

        .logo-container{
            position: absolute;
            width: 300px;
            left: calc(50% - 300px / 2);
        }
    }

}

Ce que j'ai essayé:

J'ai ajouté le clavier natif ionique et l'ai ajouté dans mon module d'application:

IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),

Cela n'a malheureusement pas fonctionné.

Mise à jour:

Ajouter

.scroll-content {
    padding-bottom: 0 !important;
}

ne fonctionne pas non plus.

ionic-frameworkionic3
5
Luuk Wuijster

Il s'agit d'un bogue connu de Ionic 3 et peut être corrigé en ajoutant le style CSS suivant:

.scroll-content {
    padding-bottom: 0 !important;
}

J'ai eu des problèmes similaires et cela a résolu le problème.

Lorsqu'une entrée a été focalisée, Ionic ajoute un remplissage au bas du scroll-content classe, pour faire de la place au clavier.

Mise à jour

En outre, vous utilisez une position supérieure relative, ce qui peut provoquer le problème.

3
Matthijs

Ajoutez simplement ceci à votre config.xml et assurez-vous que votre plug-in de clavier est installé.

<preference name="KeyboardResizeMode" value="ionic" />
0
CJCHRIST777