Ion-footer does not get pushed up when keyboard is visible (ios and android)

[Scobee]

The toolbar remains at the bottom of the page.

This is my footer code:

<ion-footer [keyboardAttach]="content">
    <ion-toolbar>
        <button ion-button clear class="color--blue text__align--center background--light-gray position--relative" (click)="!isAttaching ? triggerFileUpload($event) : false">
        Max 50(Mb)
        </button>
        <div class="background--blue height--4 position--absolute position--bottom--0 position--left--0" [ngClass]="{'display--hidden': !isAttaching}" #loader style="width: 0px"></div>
    </ion-toolbar>
</ion-footer>

I have used these settings:

<preference name="KeyboardResize" value="true" />
<preference name="KeyboardResizeMode" value="ionic" />

And

<preference name="KeyboardResize" value="true" />
<preference name="KeyboardResizeMode" value="native" />

Alongside:

scrollPadding: true,
scrollAssist: true

None of the above did the trick.
Anybody else got another suggestion?

[fredp46]

Did you find a solution to this? As I'm also experiencing the same.

[ffMathy]

Same here.

[ngware]

Same, for me.

Any ideas ?

[JoeMeeks]

I have a fix for this in app.component.ts:

1. import App, Platform, and Keyboard

import { App, Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';

2. add app and keyboard to constructor for DI and handle keyboard events in platform.ready()

    private ionapp: Element; //save ion-app reference

    constructor(
        private app: App,
        private platform: Platform,
        private keyboard: Keyboard
    ) {
        platform.ready().then(() => {
            keyboard.onKeyboardShow().subscribe((e) => {
                app.setElementClass('keyboard', true); //set keyboard class on ion-app element
                let active: any = document.activeElement;
                if (active) {
                    if ((platform.is('android') || platform.is('ios')) && e.keyboardHeight) {
                        this.ionapp = active.closest('.app-root');
                        this.ionapp.setAttribute('style', 'height: calc(100% - ' + e.keyboardHeight + 'px);');
                    }
                    if (active.scrollIntoViewIfNeeded) {
                        active.scrollIntoViewIfNeeded(true); //ensure input focus
                    }
                }
            });
            keyboard.onKeyboardHide().subscribe((e) => {
                app.setElementClass('keyboard', false); //remove keyboard-showing-specific styles
                if (platform.is('android') || platform.is('ios')) && this.ionapp) {
                    this.ionapp.setAttribute('style', 'height: 100%;');
                }
            });
        });

3. add any keyboard-showing-specific styles to app.scss or scss files for pages that need them

ion-app.platform-ios.keyboard  ion-footer .toolbar:last-child { padding-bottom: 4px; } /*override iOS style "calc(env(safe-area-inset-bottom) + 4px)"  for footer padding when keyboard is visible*/

[jcesarmobile]

Can you provide a sample app where it can be easily reproduced?
I've seen a few apps with ion-footer and it was correctly positioned over the keyboard when it appeared.

[harryt2]

I had this problem too. It happens if you put position:fixed on the the footer itself and/or put it inside the ion-content tag.

The solution for me was to put the footer outside the ion-content tag and remove the position:fixed css from the footer itself. Once it sits outside the ion-content tag, it will use fixed position on it's own and move with the keyboard. You don't need to add "position:fixed"

[gustavomachado1992]

add in app.component.ts

keyboardHeight = 0;

constructor(
    private platform: Platform,
    private keyboard: Keyboard,
  ) {}

 this.platform.ready().then(() => {
          this.statusBar.styleDefault();
          this.splashScreen.hide();
              window.addEventListener('keyboardDidShow', (e: any) => {
                  console.log('this is Brazil keyboardDidShow');
                    this.keyboardHeight = e.keyboardHeight;
                    const activeEle: any = document.activeElement;
                    if (activeEle.type === 'textarea') {
                       activeEle.scrollIntoView();
                    }
              });
              window.addEventListener('keyboardDidHide', () => {
                  console.log('this is Brazil keyboardDidHide');
                  this.keyboardHeight = 0;
              });
              window.addEventListener('keyboardWillHide', () => {
                  console.log('this is Brazil keyboardWillHide');
                  this.keyboardHeight = 0;
              });
              this.keyboard.hideFormAccessoryBar(false);
      });

Add in app.component.html

<ion-app [style.margin-bottom.px]="keyboardHeight">

[elvisgraho]

The issue appears when you begin to scroll ion-content (with fixed element).

[askona]

issue still exists

[drakedeatonuk]

Debugging a similar/same issue currently

[dpalou]

We found the same issue today in our app. We used the default KeyboardResizeMode (native) and it worked fine, but we recently changed it to "ionic" to fix another problem and then we found this bug. I opened a PullRequest to fix it:

#181