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

问题

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.

回答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).

回答2:

This person's answer helped me" https://stackoverflow.com/a/61337530/10661436

Basically just go to your AndroidManifest.xml file, search for:
android:windowSoftInputMode=ABC

Replace "ABC" with adjustPan

回答3:

Just add this to your config.xml and make sure you have your keyboard plugin installed.

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

来源：https://stackoverflow.com/questions/52804428/ionic-3-keyboard-pushes-content-up-and-over-other-content-with-no-reason

标签

ionic-framework

ionic3