Hide tabs on keyboard open

Ionic Framework ionic-v3
1

Hi! I’m trying to hide the tabs when the keyboard is open. But doesn’t seem to work anything that I tried.

The best that I got was hidding the tabs correctly, but when I set the focus on a second input, the app crashes.

Whats the best way to hide the tabs when the keyboard is open in Ionic 2???

Thank you!

1 Like
2

hey did you figure out a way to fix this?

3

Late to the party but this worked for me

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;
    }
}
4

Its working. But looks like there is transparent tab bar (i.e) When i click button on that tab bar area, button click action not fired. just keyboard is closed.

5

My css isn’t specific enough - sorry @kiruthi97
Try:

body.keyboard-is-open {
    div.tabbar.show-tabbar {
        display: none;
    }
}

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