CODEWITHSUNDEEP
angularionic-framework
HACKING CORP
HACKING CORP

Reputation: 71

ionic 4 show footer above the keyboard

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

Upvotes: 7

Views: 2139

Answers (3)

Hemant Vyas
Hemant Vyas

Reputation: 76

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');
    });
}

Upvotes: 0

Prashant
Prashant

Reputation: 1385

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

Upvotes: 0

Yushin
Yushin

Reputation: 1750

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.

Upvotes: 1

Related Questions