CODEWITHSUNDEEP
cordovaionic-framework
Roshan Bharti
Roshan Bharti

Reputation: 616

Hide footer when keyboard appear in IOS App via IONIC

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

Upvotes: 3

Views: 2706

Answers (3)

Nandy_10
Nandy_10

Reputation: 69

  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%.

Upvotes: 0

Filipe Oliveira
Filipe Oliveira

Reputation: 54

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.

Upvotes: 2

Deepika
Deepika

Reputation: 460

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.

Upvotes: 2

Related Questions