css - 键盘打开时向上滚动 Ionic 2

Question

我尝试使用 Ionic 设计一个登录屏幕，我的字段位于页面的中央。当我选择输入时，我想向上滚动屏幕以将我的字段和登录按钮保持在应用程序屏幕的中央。

我有 1 中的这个，我想要 2

我真的不知道该怎么做。

这是我的 html 代码:

<ion-content class="login-page-background">
  <div class="content-login">
    <img src="assets/images/logo-yellow.svg" width="70%"><br><br>
    <div>
      <div class="login-information-bloc">
        <input placeholder="{{this.translate.get('...')}}" (select)="scrollUp()" class="input-login"/>
        <input type="password" placeholder="{{this.translate.get('...')}}" class="input-login"/><br>
        <p class="password-forgot">{{this.translate.get('...')}}</p>
      </div>
      <button (click)="login()" ion-button color="secondary">
        <label>{{this.translate.get('...')}}</label>
      </button>
    </div>

    <div class="flag-bloc">
      <p>{{this.translate.get('...')}}</p>
      <img src="assets/images/fr.svg" (click)="changeCountry('fr')" [ngClass]="{'flag-button' : this.fr_selected}" width="55px" style="margin: 0px 10px 0px 10px">
      <img src="assets/images/ch.svg" (click)="changeCountry('ch')" [ngClass]="{'flag-button' : this.ch_selected}" width="55px" style="margin: 0px 10px 0px 10px">
    </div>
  </div>
</ion-content>

Answer 1

如果您检查 html，您会注意到 ion-content 有一个 fixed-content 和 scroll-content 子项。因此，当键盘打开时，scroll-content 将自动调整大小以适应新的屏幕空间。

话虽如此，我不知道您所有的 css 类中包含什么，但我建议您的容器类中不要有任何固定高度。这样当内容调整大小时，您的元素应该适合新的较短的容器大小。