Ionic 3 - Keyboard pushes content up, and over other content, with no reason

Question

I am working on a simple app in Ionic.

I have a problem that the keyboard pushes my input field up and over another div while there is enough space for they keyboard. How do I fix this? I already looked around on the internet but wasn't able to find any solution to my problem.

This is what happens:

As you can see, the text is in the image and there is no reason for it being so high. There is more then enough space below it.

This is my 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);
        }
    }

}

What I have tried:

I have added the Ionic native keyboard and added this in my app module:

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

This unfortunately did not work.

Update:

Adding

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

is also not working.

Answer 1

This is a known bug of Ionic 3 and can be fixed by adding the following CSS style:

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

I have had similar issues and this piece of CSS fixed it.

When an input is focused, Ionic adds some padding to the bottom of the scroll-content class, to create room for the keyboard.

---

Update

Relative top positioning may cause the issue (as well).