键盘打开时向上滚动离子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有一个固定内容和滚动内容的孩子。因此，当键盘打开时，滚动内容将自动调整为新的屏幕空间。

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