离子页脚位于键盘顶部答案

【问题标题】：Ion-footer goes on top of keyboard离子页脚位于键盘顶部
【发布时间】：2021-12-07 07:21:56
【问题描述】：

我正面临这个问题，我已经尝试了很多解决方案来解决它。但我无法解决这个问题。当我在手机上使用谷歌浏览器上的网络应用程序时，页脚出现在键盘上。有人有解决办法吗？

<ion-header>

</ion-header>

<ion-content>
<form [formGroup]="formGroupLogin" (ngSubmit)="signIn()">
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3" size-md="4" offset-md="4">
        <ion-img src="../../assets/rinaldi-logoSVG.svg" style="height: 110px; margin-top: 60px"></ion-img>
        <div style="display: grid; align-items: center; justify-content: center;">
          <h3 id="title-login">Area Riservata</h3>
        </div>
      </ion-col>
    </ion-row>
    <ion-row style="display: flex; justify-content: center; align-items: center;">
      <ion-col size-md ="4">
        <ion-item>
          <ion-label position="floating" style="font-family: Gilmer Medium">Email</ion-label>
          <ion-input type="email" email formControlName="Username"></ion-input>
        </ion-item>
        <span class="error ion-padding" *ngIf="isSubmitted && errorForm.Username.errors?.required">
          Email campo obbligatorio
        </span>
        <span class="error ion-padding" *ngIf="isSubmitted && errorForm.Username.errors?.email">
          Formato e-mail errato 
        </span>
        <ion-item>
          <ion-label position="floating" style="font-family: Gilmer Medium">Password</ion-label>
          <ion-input type="password" formControlName="Password"></ion-input> 
        </ion-item>
        <span class="error ion-padding" *ngIf="isSubmitted && errorForm.Password.errors?.required">
          Password campo obbligatorio
        </span>
        <div style="padding-top: 30px">
          <ion-button expand="block" type ="submit" style="--border-radius: 20px; --background: #192437; font-family: Gilmer Medium" >Login</ion-button>
        </div>

        <div style="display: grid; justify-content: center; align-items: center; text-align: center;">
          <a routerLink="/recover-password" style="cursor: pointer; padding-top:10px; font-family: Gilmer Medium">Password dimenticata?</a>
          <p style="font-family: Gilmer Medium">Non sei ancora registrato?</p>
          <a routerLink="/registrazione" style="cursor: pointer; font-family: Gilmer Medium">Registrati</a>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>
</ion-content>

<!-- FOOTER -->
<ion-footer class="ion-no-border" style="display: grid; place-content: center;">
  <ion-toolbar class="ion-text-center">
    <ion-label class="ion-text-wrap" style="font-size: small; font-family: Gilmer Medium;">©2021 Rinaldi Superforni–Tutti i diritti riservati–
      P.IVA 00523850451</ion-label>
  </ion-toolbar>
</ion-footer>

2 天寻找解决方案，但我不能资助任何有同样问题的人。有没有人可以帮帮我？

【问题讨论】：

如果您的页脚内容在页面之间没有变化，最好在 app.component.html 中定义它或创建一个单独的页脚组件并在任何地方调用它。

标签： css angular ionic-framework

【解决方案1】：

好吧，很久以前，在 Ionic 项目中，我遇到了需要隐藏 footer 的问题，每当显示键盘时，就直接这样做了：

<ion-footer translucent="true" class="ion-no-border" *ngIf="footerVisible">
    <ion-row class="ion-align-items-center ion-justify-content-center">
      <ion-col  size="12" class="ion-padding ion-align-items-center ion-justify-content-center" style="color: #acacac; display: flex; justify-content: center;">
        Do not have an Account?
        &nbsp;
        <a class="btn-create-account red" routerLink="/auth/register">Create an account</a>
      </ion-col>
    </ion-row>
</ion-footer>

...而且，显然在课堂上：

  ngOnInit() {
    (this.el.nativeElement.querySelectorAll('ion-input'))
      .forEach(inputEl => {
        inputEl.addEventListener('focusin', e => this.footerVisible = false);
        inputEl.addEventListener('focusout', e => this.footerVisible = true);
      });
  }

【讨论】：