Question

我在项目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>

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

This无效

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

键盘推入Ionic 3中的内容

0 个答案: