Ionic 4 iOS Keyboard over text input

user_2304751 0
Viewed 4099

Edit: Here is the bug report - https://github.com/ionic-team/ionic/issues/16797#issuecomment-457919043

My fix for native Ionic was when 4.0.0 was released add this to the Capacitor Json File:

"Keyboard": { "resize": "ionic" }

It still has the same issue in Safari, and there is an issue with Capacitor and tabs in Native iOS that I posted on Capacitor GitHub reports which was just closed out and should be pushed in the next release.

Below is the HTML for the page. When I click on the bottom text box, the keyboard displays over the text box, not allowing it to be seen. Image below as well.

Is it because of the height of the new iOS keyboard? I added a new input below the three pictured and tried it on the simulator so it was way below the keyboard top. Still same issue.

It's not in the footer and not Ionic 3, so I couldn't find another similar question.

iOS 

<ion-content padding>
  <ion-card>
    <ion-card-header> New Password </ion-card-header>
    <ion-card-content> Change the password for {{ username }}. </ion-card-content>
  </ion-card>
  <form [formGroup]="changePasswordForm" (ngSubmit)="changePassword()">
    <ion-item no-padding margin>
      <ion-label position="stacked">Current Password</ion-label>
      <ion-input formControlName="oldPassword" type="password"></ion-input>
    </ion-item>
    <ion-item no-padding margin>
      <ion-label position="stacked">New Password</ion-label>
      <ion-input formControlName="password" type="password"></ion-input>
    </ion-item>
    <ion-item no-padding margin>
      <ion-label position="stacked">Confirm New Password</ion-label>
      <ion-input formControlName="confirmPassword" type="password"></ion-input>
    </ion-item>
    <ion-button type="submit" [disabled]="!changePasswordForm.valid" margin>Reset</ion-button>
  </form>
</ion-content>
ionic4 ionic-framework
1 Answers

I encountered the same issue, and managed to solve it by calling this method when an ion-input element gets clicked:

public focusInput (event): void {

    let total = 0;
    let container = null;

    const _rec = (obj) => {

        total += obj.offsetTop;
        const par = obj.offsetParent;
        if (par && par.localName !== 'ion-content') {
            _rec(par);
        } else {
            container = par;
        }
    }
    _rec(event.target);
    container.scrollToPoint(0, total - 50, 400);
}

You might want to adjust the if-statement to fit your code. The idea of this method is to recursivly calculate the offset to the upper most scrollable element, in this case the ion-content, and scroll this distance down using the scrollToPoint() method (Docs).

It's not the most clean method of doing things, but hopefully it still helps.

user_86036810
Related