5

referred to this link: Hide footer on keyboard open Ionic3

But then also issue is the same

enter image description here

Issue is same as in above image.... I have just added button in footer...

.html file

<ion-content>
<textarea placeholder="Please leave your review"></textarea>
<ion-content>

<ion-footer>
<ion-button (click)="submit()">Submit</ion-button>
</ion-footer>

So, When click on textarea, keyboard opens and the buttons appears to be above the keyboard.

I want whenever the keyboard opens.....the footer get hide.

piet.t
  • 11,718
  • 21
  • 43
  • 52
Anjali Sharma
  • 535
  • 6
  • 15

2 Answers2

7

IONIC 4

Step:1 You need to install native keyboard plugin for using keyboard methods. You can install it from here.

Step:2 Then import it in your page.ts file like this

import { Keyboard } from '@ionic-native/keyboard/ngx';

Step:3 Then put it in the providers under @Component as

@Component({
providers: [Keyboard]
})

Step:4 After that , make a constructor for keyboard in your class in constructor section. Repeat same step 2-4 in your app.component.ts file

constructor(public keyboard:Keyboard) {
  }

Step:5 Then take a variable to default hide keyboard on load of the page as in your class:

isKeyboardHide=true;

Step:6 After that, all you need to call default methods of keyboard in ionWillEnter method and on show put the variable value as false for showing keyboard.

ionViewWillEnter() {
    this.keyboard.onKeyboardWillShow().subscribe(()=>{
      this.isKeyboardHide=false;
      // console.log('SHOWK');
    });

    this.keyboard.onKeyboardWillHide().subscribe(()=>{
      this.isKeyboardHide=true;
      // console.log('HIDEK');
    });
  }

Step:7 Hide and show bottom div or footer accordingly.

//// FOR DIV BOTTOM DIV////
    <div class="" *ngIf="isKeyboardHide">
    </div>
//// OR FOR FOOTER ////
    <ion-content></ion-content>

    <ion-footer *ngIf="isKeyboardHide">
    </ion-footer>
Community
  • 1
  • 1
Diksha235
  • 442
  • 7
  • 17
  • 1
    @annaya, did you get the solution? – Arj 1411 Aug 15 '19 at 01:44
  • Using Angular/Ionic6 with capacitor i've had to do the following on install: 1. npm install cordova-plugin-ionic-keyboard 2. npm install @ionic-native/keyboard 3. ionic cap sync I prefer to provide Keyboard in the .module file instead of the component itself. – Rdev Oct 19 '22 at 16:15
1

The best solution is use 'inVisible' property to hide footer or div.

for example:

<ion-footer *ngIf="!keyboard.isVisible">
 I am footer!
</ion-footer>
Himanshu Shekhar
  • 5,483
  • 3
  • 11
  • 8
  • 1
    This still works ^ for Ionic 5 -- but you need the `import { Keyboard } from '@ionic-native/keyboard/ngx';` and `providers: [Keyboard]` and `constructor(public keyboard:Keyboard)` as per @Diksha235's answer – Grant Jan 19 '21 at 01:48