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