Ionic 3 - 键盘无缘无故地向上推内容，并超过其他内容答案

【问题标题】：Ionic 3 - Keyboard pushes content up, and over other content, with no reasonIonic 3 - 键盘无缘无故地向上推内容，并超过其他内容
【发布时间】：2018-10-14 15:50:43
【问题描述】：

我正在使用 Ionic 开发一个简单的应用程序。

我有一个问题，键盘将我的输入字段向上推到另一个 div 上，而他们的键盘空间足够。我该如何解决？我已经在互联网上四处寻找，但找不到任何解决我的问题的方法。

会发生这样的事情：

如您所见，文字在图像中，它没有理由这么高。它下面还有足够的空间。

这是我的代码：

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);
        }
    }

}

我尝试过的：

我已添加 Ionic native keyboard 并将其添加到我的应用模块中：

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

很遗憾，这不起作用。

更新：

添加

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

也不行。

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

这是 Ionic 3 的一个已知错误，可以通过添加以下 CSS 样式来修复：

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

我也遇到过类似的问题，这段 CSS 修复了它。

当输入获得焦点时，Ionic 会在 scroll-content 类的底部添加一些填充，为键盘腾出空间。

更新

相对顶部定位也可能导致问题。

【讨论】：

【解决方案2】：

这个人的回答对我有帮助” https://stackoverflow.com/a/61337530/10661436

基本上只需转到您的 AndroidManifest.xml 文件，搜索：
android:windowSoftInputMode=ABC

将“ABC”替换为adjustPan

【讨论】：

【解决方案3】：

只需将其添加到您的 config.xml 并确保您已安装键盘插件。

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

【讨论】：