1

我在我的项目中使用 Ionic 3 和 gridlayout 在不同的显示器上进行缩放。问题是当我点击输入并且键盘显示孔内容被向上推时（参见屏幕截图）。奇怪的是红色盒子保持在原位，而它下面的内容被向上推并与红色盒子重叠。我认为这可能是我的 css 样式的问题，但我注释掉了 login.scss 中的所有样式，它仍然是同样的问题。

在此处输入图像描述 在此处输入图像描述

这是 HTML

<ion-header>
</ion-header>
<ion-content class="background-color">
  <ion-grid>
      <ion-row>
        <ion-col></ion-col>
        <ion-col col-10>
          <div style="background-color:red; width: 200px; height: 50px;">
          </div>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
      <ion-row id="loginform" align-items-end>
        <ion-col></ion-col>
        <ion-col col-10>
            <form (submit)="doLogin()">
                <ion-list class="login-list">
                  <ion-item class="no-border-top transparent-color-input">
                    <ion-input placeholder="{{'EMAIL' | translate}}" class="login-text-size-normal border-bottom" type="email"
                      [(ngModel)]="account.email" name="email"></ion-input>
                  </ion-item>
                  <ion-item class="transparent-color-input">
                    <ion-input class="login-text-size-normal border-bottom" placeholder="{{ 'PASSWORD' | translate }}" type="password"
                      [(ngModel)]="account.password" name="password"></ion-input>
                  </ion-item>
                  <div padding>
                    <button class="login-button login-text-size-normal" block [disabled]="!userInputIsValid(account.email, account.password)">{{
                      'LOGIN_BUTTON' | translate }}</button>
                  </div>
                </ion-list>
              </form>
            </ion-col>
            <ion-col></ion-col>
          </ion-row>
          <ion-row id="loginlinks" align-items-center>
              <ion-col></ion-col>
              <ion-col col-10>
              <div class="login-links-wrapper">
                <div class="login-links login-text-size-normal">
                  <a (click)="clickForgotPw()">{{ 'FORGOT_PW' | translate }}</a>
                </div>
                <div class="login-links login-text-size-normal signup">
                  <a (click)="presentModal()">{{ 'SIGNUP' | translate }}</a>
                </div>
              </div>
              </ion-col>
              <ion-col></ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

我已经用谷歌搜索过了，我已经尝试过的是

这没用

这没用

这没用

这没用

那么有人可以帮助我吗？Ionic 4 解决了这个问题吗？

4

0 回答 0