Hide footer on keyboard open Ionic3

Question

I'm trying to hide the footer of my Ionic 3 app when the keyboard is open,

i've followed the steps found on official documentation and also on this question's accepted answer: Hide tabs on keyboard open

I've correctly installed the keyboard plugin and imported it in app.module.ts, i have this code in app.component.ts:

this.platform.ready().then(() => {

  this.keyboard.onKeyboardShow().subscribe(() => {
        document.body.classList.add('keyboard-is-open');
    });

    this.keyboard.onKeyboardHide().subscribe(() => {
        document.body.classList.remove('keyboard-is-open');
    });


});

i've correctly set the css class :

body.keyboard-is-open .hideElementOnKeyboardShown{
    display: none;        
}

and added this "hideElementOnKeyboardShown" class to the footer, what's happening now is that the footer disappears for few milliseconds (i guess the time that it takes for the keyboard to show up) and then reappears on top of the keyboard, partially hiding some input fields on the page.

I need to find a way to hide the footer, or just to keep it at the bottom of the page, covered by the keyboard (i've also tried with z-index but it isn't working)

score 2 · Answer 1 · answered May 16 '18 at 03:28

2

Hi!

All you need to do is to add a {hidden} property on you ion-footer and set it according to a 'keyboard is open' method that returns true or false.

Example:

<ion-footer [hidden]="keyboard.isOpen()" no-border padding>
 //content
</ion-footer>

answered May 16 '18 at 03:28

user9797701

21
3

my keyboard instance does not have a isOpen() method according to typescript. – Juan José Ramírez Apr 13 '19 at 22:40
Please check this link https://ionicframework.com/docs/native/keyboard, hope it helps – user9797701 Sep 19 '19 at 05:06

score 2 · Answer 2 · edited Jul 04 '19 at 11:34

2

Component.html

<ion-footer [hidden]="isHideFooter"> ....</ion-footer>

Component.ts

isHideFooter:boolean = false;

ionViewWillEnter() {

  this.keyboard.onKeyboardShow().subscribe((result)=>{
    this.isHideFooter=true;
  })

  this.keyboard.onKeyboardHide().subscribe((result)=>{
    this.isHideFooter=false;
  })
}

edited Jul 04 '19 at 11:34

barbsan

3,418
11
21
28

answered Jul 04 '19 at 11:27

gokhanku

21
1

for people looking for answers ... along with this you just need to install ionic native npm package as well npm install --save @ionic-native/keyboard@4 ................. Link : https://ionicframework.com/docs/v3/native/keyboard/ – MSD Dec 18 '19 at 09:12

score 0 · Answer 3 · answered Nov 27 '19 at 09:14

0

In case your problem is that, footer is moving up when keyboard opens

So rather to hide the footer you can make use of

android:windowSoftInputMode="adjustPan"

put this line in your app/manifests/AndroidManifest.xml inside activity tag that contains your intentfilter action as 'MAIN' and category as 'LAUNCHER'

if this is your problem it will solve it!

answered Nov 27 '19 at 09:14

Aman Kumar Gupta

2,640
20
18

Be careful, with that, you risk to get an input behind your keyboard, with a user having no possibility to see what he/she's typing... – Guillaume Jan 27 '20 at 11:11

Hide footer on keyboard open Ionic3

3 Answers3

Linked