ionic 4 show footer above the keyboard

user_9734826 0
Viewed 1440

enter image description hereenter image description hereI have a problem with the keyboard in my application ionic 4. the text box in the footer is hidden when the keyboard is displayed, which makes it impossible to see what is written in the text box.

without keyboard

when the keyboard is displayed

thank you for proposing a solution to my problem

ionic-framework angular
3 Answers

i am pretty certain you have you application in fullscreen mode if so please remove the full screen mode as it does not go with ionic 4 footer inputs.

user_61415130

Have you tried Using a regular <input type="text"> instead of <ion-input type="text">. That was easy fix for me on ionic 3.

user_28079490

Working solution for Ionic 5 with capacitor, Adding listener on keyboard events, we can toggle the whole ion-footer element to transform up or down. Note the minus sign in translate3d keyboardHeight.

import { Plugins, KeyboardInfo } from '@capacitor/core';
const { Keyboard } = Plugins;

@ViewChild(IonFooter, { read: ElementRef }) private inputTextArea: ElementRef

  ionViewDidEnter() {

    Keyboard.addListener('keyboardDidShow', (info: KeyboardInfo) => {
      console.log('keyboard will show with height', info.keyboardHeight);
      this.inputTextArea.nativeElement.style.setProperty(
        'transform',
        `translate3d(0, -${info.keyboardHeight}px, 0)`
      );
    });

    Keyboard.addListener('keyboardDidHide', () => {
      console.log('keyboard did hide');
      this.inputTextArea.nativeElement.style.removeProperty('transform');
    });
}
user_65543920
Related