css - 键盘将模态弹出窗口中的文本字段推到顶部

Question

在我的应用程序中，一旦弹出窗口(模态)与他内部的组件(添加)一起出现，该组件就是一个输入，当我想写一些东西时，键盘将我的组件和我的模态推到顶部。

即使键盘在这里，我也希望它被修复。

这是 modal.html

<ion-content class="card"  overflow-scroll="false"padding>

  <ion-navbar>
    <ion-buttons start>
    <button style="background-color: #F8F8F8">
       <ion-icon name="close"style="font-size: 25px;
       background-color: #F8F8F8"   (click)="dismiss()"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>

  <add></add>
  <button ion-button color="red" >
  </button>
</ion-content>

模型的css.css

.card {
  max-width: 90%;
  max-height:55%;
  top: 10%;
  overflow: hidden !important;
  left: 5%; 
  right: 5%; 
  bottom: 5%;
  background-color: red;

}

component.html

<div class="add-content">
  <div>
    <ion-item class="code">
      <ion-input type="text" maxlength="4"></ion-input>
    </ion-item>
    <span class="dash">-</span>
    <ion-item class="code">
      <ion-inputtype="text" maxlength="4"></ion-input>
    </ion-item>
  </div>
  </div>

组件.css

add .code {
  display: inline-block;
  width: 100%;
  max-width: 37%;
}

add button {
 margin: 5%
}

add input {
  letter-spacing: 4.8px;
  text-align:center
}

Answer 1

我在打开键盘时遇到同样的问题，它会使我的屏幕稍微向上移动

为此，您需要在键盘打开时禁用滚动。

尝试在您的组件构造函数中添加此代码:

constructor(
 public keyboard: Keyboard,
 platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.keyboard.disableScroll(true);
    });

}

我通过上面的代码解决了我的问题，请尝试让我知道它是否适合你。