Floating action button goes behind keyboard on iOS

Ionic Framework ionic-v3
1

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?

cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2
2

Anybody?

Is it save to use FABs as a design element for iOS or do I have to change my design?

3

Bump. Someone must have tried to use Floating Action Buttons on iOS…

4

I’m having the same problem. Any help is welcome. :wink:

5

I’ve given up on using FABs on iOS. I use a different button style on iOS.

6

I had the same issue today and I found a workaround.

I started by defining in my controller a boolean variable that indicates if the keyboard is open or not. I defined it in false by default and in the constructor I subscribed to the onKeyboardShow and onKeyboardHide events (from the Ionic Keyboard), so I can change my variable accordingly.

Then I created a function that returns me a class name if the platform is iOS and the keyboard is open, so:

fabButtonClass() {
  return this.platform.is('ios') && this.keyboardOpen ? 'ios-fab-button' : '';
}

And the HTML code for the fab button would be:

<ion-fab right bottom [ngClass]="fabButtonClass()">
    <button ion-fab color="primary" (click)="save()">Save</button>
</ion-fab>

And in the stylesheet:
.ios-fab-button { top: 45%; }

I hope this works.

7

Had this issue on iOS.
FAB goes mad after native keyboard has been shown at least once (input has got a focus).
Fixed in this way:

in app.component.ts

      import {Keyboard} from '@ionic-native/keyboard';
      ....

      constructor(..., private keyboard: Keyboard, ...)
      ....

      // inside  this.platform.ready().then

      const kbdShow$ = this.keyboard.onKeyboardShow().map(() => 'show');
      const kbdHide$ = this.keyboard.onKeyboardHide().map(() => 'hide');
      Observable.merge(kbdShow$, kbdHide$)
        .debounceTime(300)
        .subscribe(evt => {
          if (evt === 'hide') {
            window.scrollTo(0, 0);
            document.body.scrollTop = 0;
          }
        })