Question

在我的应用程序中，只要弹出窗口（模态）apear与组件（添加）在他内部，该组件是一个输入，当我想写一些东西键盘将我的组件和我的模态推到顶部。

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

这是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>

model.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>

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

}

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

键盘将模态popUp中的文本字段推到顶部

1 个答案: