Ionic 4 Keyboard covers Content on iOS

Ionic Framework ionic-v3
1

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.

IMG_0858

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start"> <ion-back-button defaultHref="/tabs/account/"></ion-back-button> </ion-buttons>
    <ion-title><img src="assets/wp-toolbar.png"/></ion-title>
  </ion-toolbar>
</ion-header>

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