Auto hide tabs when keyboard is open

[RaymondAtivie]

When the keyboard is opened in a tabs page (position=bottom), the tabs appear on top of the keyboard.

The expected behavior is to hide the tabs when the keyboard is visible

Steps to reproduce:

1. Create a starter tabs template
2. Include an ion-input in the page
3. Run it on a device and focus on the input element

Maybe a CSS class can be added to the page when the keyboard is open (.keyboard-is-open) so that the behavior can be controlled

This issue is for Ionic 2

Cordova CLI: 5.2.0 Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.9 Ionic CLI Version: 2.0.0-beta.30 Ionic App Lib Version: 2.0.0-beta.16 OS: Node Version: v4.3.2

[martingitehi]

Here is what I did to hide keyboard dynamically:

in my TS file:

@ViewChild('foot') foo_ter: ElementRef;
  constructor(private platform: Platform, private keyboard: Keyboard) {
    this.platform.ready().then(() => {
      this.keyboard.onKeyboardShow().subscribe(() => {
        this.foo_ter.nativeElement.hidden = true;
      });
      this.keyboard.onKeyboardHide().subscribe(() => {
        this.foo_ter.nativeElement.hidden = false;
      });
    });
  }

then in my HTML file, I make a template variable called #footer which is what I am referencing in the TS above like this:

<ion-footer no-border style="padding:5%;" #footer>
  <ion-item no-lines>
   Don't have an account?
    <button ion-button style="text-align:center;" bold item-end clear no-lines clear (click)="signup()">
      Sign Up
    </button>
  </ion-item>
</ion-footer>

I hope it works for you too :-) @RaymondAtivie

[abishekg]

I gave it this way in Ionic V3. Works perfectly fine. TS file ionViewDidEnter() { if (this.keyboard.isOpen()) this.showTabs = false; else this.showTabs = true; }

HTML file <ion-tabs *ngIf="showTabs" #myTabs>

[senturkhasan]

dasda

asd

[senturkhasan]

not true answer

[jayzyaj]

Is there any update on the official solution for this?

[dharapvj]

As of today.. with Ionic v I could not get @ionic-native/keyboard to work. As many others stated.. onKeyboardShow() event never fires. also cordova-keyboard-plugin has been deprecated.

So what worked for me was...

cordova plugin add cordova-plugin-ionic-keyboard --save

post this.. I added window.addEventListener as described in their readme

don't forget to remove the eventlistener in case you leave the tab page and come back to it again..

// MyTabs.ts
  showListener() {
    console.log('keyboard visible');
    document.body.classList.add('keyboard-is-open');
  }
  hideListener() {
    console.log('keyboard hides');
    document.body.classList.remove('keyboard-is-open');
  }

  ionViewDidEnter() {
    window.addEventListener('keyboardWillShow', this.showListener);
    window.addEventListener('keyboardDidHide', this.hideListener);
  }

  ionViewWillLeave() {
    window.removeEventListener('keyboardWillShow', this.showListener);
    window.removeEventListener('keyboardDidHide', this.hideListener);
  }

[jayzyaj]

At first at worked for me. When I first click on an input when the keyboard is shown the tabbar was hidden. After I click on another input the tabbar has showed again. So in my case the tabbar only been hided when I click on input field at first.

Any suggestion? @dharapvj

[codymbeardsley]

Hey everyone, while it's not the same as "hiding" the tab bar, this solution worked well for me by allowing the keyboard to obscure the tab bar instead of pushing it up.

In your main config.xml, edit the android platform to include the following:

    <platform name="android">
        ...
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
            <activity android:windowSoftInputMode="adjustPan" />
        </edit-config>
    </platform>

What this does is modify the default value that Cordova writes to your AndroidManifest.xml to control the global keyboard input behavior for your app.

...and if you check AndroidManifest.xml on your next build you'll see that the default of android:windowSoftInputMode="adjustResize" is changed to "adjustPan", thus allowing the tab bar to be obscured.

[Motoralfa]

@codymbeardsley Thank you so much! This solution work for me; at least for android it is a good solution. When the Keyboard is open, instead of pushing the toolbar, the keyboard just hide the footer!

[robroy92]

Works Perfect! Thank you @codymbeardsley

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.