Ionic 3-键盘无缘无故地将内容推到其他内容之上 [英] Ionic 3 - Keyboard pushes content up, and over other content, with no reason

问题描述

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

I am working on a simple app in Ionic.

我有一个问题，就是键盘将我的输入字段向上推到另一个div上方，同时又有足够的空间供他们键盘输入.我该如何解决?我已经在互联网上四处张望，但是找不到解决我问题的方法.

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.

会发生这种情况:

如您所见，文本在图像中，因此没有理由如此之高.在其下方有足够的空间.

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.

这是我的代码:

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

}

我尝试过的事情:

我已添加离子本机键盘，并将其添加到我的应用模块中:

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

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

不幸的是，这没有用.

更新:

添加

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

也不起作用.

推荐答案

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

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

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

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

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

在对输入进行聚焦时，Ionic在 scroll-content 类的底部添加了一些填充，以为键盘腾出空间.

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

更新

相对的顶部定位也可能会引起问题.

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

这篇关于Ionic 3-键盘无缘无故地将内容推到其他内容之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！