Hide footer when keyboard appear in IOS App via IONIC

Question

I have an issue with the footer-bar, when an input is focused ( in the ion-content ) the keyboard appear and the footer stay above the keyboard. The thing is that it hides what is under the input, particularly in landscape mode, and so hide the popover that appear under the focused input.

Anyone know how to solve this problem? Can I hide the footer when the keyboard appear?

Thanks

Answer 1

SET 
cordova.plugins.Keyboard.disableScroll(true); 
AS 
cordova.plugins.Keyboard.disableScroll(false);
inside ur app.js file.
this code worked for me.try it out.

Answer 2

From Ionic docs :

To hide an element when the keyboard is open, add the class hide-on-keyboard-open.

<div class="hide-on-keyboard-open"> <div id="google-map"></div> </div>

So basically you just have to add this class to your footer.

Answer 3

1. Declare a document variable like this:-

   declare var document:any;

2. Subscribe for keyboard show and hide events using native keybaord plugin like this:-

   Keyboard.onKeyboardShow().subscribe( (value)=>{ document.body.classList.add('hide-on-keyboard-open'); }

   Keyboard.onKeyboardHide().subscribe( (value)=>{ document.body.classList.remove('hide-on-keyboard-open'); }

3. Add css :-

   body.hide-on-keyboard-open .scroll-content{ margin-bottom: 0px !important; }

   body.hide-on-keyboard-open .footer{ display: none; }

THATS IT, YOU'RE GOOD TO GO THIS WORKS PERFECT 100%.