Unwated scroll apear when keyboard is open ( iOS )

@bmagne wrote:

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

Posts: 1

Participants: 1

Read full topic