Ion-footer goes on top of keyboard

user_14288391 0
Viewed 540

I’m facing this problem and I have tried a lot of solution to solve it. But I cannot fix this issue. When I use the web app on Google browser with my phone, the footer is showing up of keyboard. Is anyone have a solution ?

enter image description here

enter image description here

<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 days looking for a solution, but i cannot fund anyone who has the same problem. Is anyone one can help me?

ionic-framework angular css
1 Answers

Well, long ago, in Ionic projects, I had the issues of needing to hide the footer , whenever the keyboard is shown, so did it straight:

<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>

... and, obviously in class:

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