[SOLVED] Unwated scroll apear when keyboard is open ( iOS )

Ionic Framework ionic-v3
1

Hi everyone,

I have a problem and i didn’t found anything relative to this issue, when i want to fill a field on my home page, when the keyboard is open the page content is scrollable and a white space at the bottom is added :

ionic_scroll
ionic_scroll.gif480×640 2.73 MB

Here is my home page :

html :

<ion-content class="no-scroll">

  <div class="vertical-center" id="header">
    <img id="logo-home" src="assets/img/logo-app-home.png" alt="">
  </div>

  <div id="login-container">

      <ion-list>
          
        <ion-item no-lines>
          <ion-label fixed>Utilisateur</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      
        <ion-item no-lines>
          <ion-label fixed>Mot de passe</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      
      </ion-list>

      <button ion-button color="eatsalad" full>Sign In</button>


  </div>

</ion-content>

scss :

page-home {

    .no-scroll .scroll-content{
        overflow: hidden;
    }

    // Vertically center content
    .vertical-center {
        display: flex!important;
        align-content: center!important;
        align-items: center!important;
    }

    #header{
        background-color: #ffffff;
        box-shadow: 0 4px 100px -2px rgba(0, 0, 0, 0.50);
        position: relative;
        height: 50vh;
    }

    #header #logo-home{
        display: table-cell;
        width: 70%;
        margin: 0 auto;
    }

    #login-container{
        height: 50vh;
        background-color: #8dbc22;
    }

    #login-container ion-item{
        background-color: #8dbc22;
    }

    #login-container ion-item input{
        border-radius: 5px;
        background-color: rgba(255,255,255,0.5);
    }
}

Any idea ?

Thanks,

Ben.

1 Like
2

I resolved my problem changing my html structure :

<ion-content class="no-scroll">

  <ion-grid id="header">

    <ion-row>
      <ion-col>
        <img id="logo-home" src="assets/img/logo-app-home.png" alt="">
      </ion-col>
    </ion-row>

  </ion-grid>
    
  <ion-grid id="login-container">

    <ion-row>
      <ion-col col-8 offset-2>
        <ion-list>
          
          <ion-item no-lines>
            <ion-label fixed>Utilisateur</ion-label>
            <ion-input type="text"></ion-input>
          </ion-item>
          
          <br/>
          
          <ion-item no-lines>
            <ion-label fixed>Mot de passe</ion-label>
            <ion-input type="password"></ion-input>
          </ion-item>
      
        </ion-list>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col col-2 offset-5>
        <button ion-button color="eatsalad" id="login" full>Connexion</button>
      </ion-col>
    </ion-row>

  </ion-grid>

</ion-content>


    ion-grid{
        height: 50vh;
        justify-content: center;
    }