I have a form with a Floating Action Button for “save”. On Android, the FAB works as expected, however on iOS, the button disappears behind the keyboard. I am running the iOS app on a physical iPhone 7 via the Ionic View app.
My HTML looks like:
<ion-content padding> <ion-fab right bottom> <button ion-fab color="primary" (click)="save()">Save</button> </ion-fab> <form novalidate [formGroup]="form"> <ion-row> ... </ion-row> </form> </ion-content>
The responsive grid inside the form has 3 columns (ion-col). Only when the input focus is in the last of the 3 columns, does the FAB stay above the keyboard. When the input focus is in the top 2 columns, it looks like the FAB is stuck to the bottom right corner of the screen, below the keyboard.
I’ve tried with the ion-fab both inside and outside the ion-content, but it made no difference.
Is this an iOS bug/known issue? Is there a workaround?
@ionic/cli-utils : 1.19.0 ionic (Ionic CLI) : 3.19.0
cordova (Cordova CLI) : 7.1.0
@ionic/app-scripts : 3.1.0 Cordova Platforms : android 6.3.0 ios 4.5.4 Ionic Framework : ionic-angular 3.9.2