How to hide tabs when keyboard is shown?

Ionic Native
#1

I want to hide the tabs when keyboard is shown. But could not find any working solutions. I have tried with the native keyboard api to show and hide tabs

export class TabsPage {
  homePage = HomePage;
  explorePage = ExplorePage;
  cartPage = CartPage;
  feedPage = FeedPage;
  valueforngif = true;

  constructor(platform: Platform, public navCtrl: NavController, public navParams: NavParams, public keyboard:Keyboard) {
    platform.ready().then(()=>{
      this.keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false;});
      this.keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true});
    })
  }

  ionViewDidLoad() {

  }

  tabchange($event){
    console.log('tab changing');
  }

}

and tabs.html looks like this
<ion tabs *ngIf="valueforngif"> <ion-tab>....</ion-tab> </ion-tabs>
but when keyboard opens, the whole app stops working and i think that’s because the root is gone when i set false to the ion-tabs. Can you help me to solve this ?

#2

Forget the *ngIf !

What you can do is this:

If the keyboard shows use this code to hide it.

Just as an example:

  keyboardCheck() {
    if(this.keyboard.isOpen()){
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
      Object.keys(tabs).map((key) => {
        tabs[key].style.display = 'none';
        });
      }
   }else if(this.keyboard.isClosed()){
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
      Object.keys(tabs).map((key) => {
        tabs[key].style.display = 'flex';
        });
      }
   }

Note: You can also just use else instead of else if!

If you wanna know more about the open/closed keyboard command I suggest you read this doc:

2 Likes
#3

I managed to get this working!
Note: I only have one set of tabs in my app

1. Install the Ionic Native keyboard

ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install --save @ionic-native/keyboard

See docs: https://ionicframework.com/docs/native/keyboard/

2. Followed pretty much the fix here:

app.component.ts
import keyboard

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

add to constructor

public keyboard: Keyboard

inside platform.ready: add and remove class based on whether the keyboard is open or closed

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');
    });
});

app.scss
add styling logic to hide and show the tabs based on the class ‘keyboard-is-open’ is present

body.keyboard-is-open {
    div.tabbar.show-tabbar {
        display: none;
    }
    scroll-content {
        margin-bottom: 0 !important;
    }
}
3 Likes
#4