# Hide tabs on keyboard open

**URL:** <https://forum.ionicframework.com/t/hide-tabs-on-keyboard-open/88577>\
**Category:** ionic-v3\
**Created:** [May 2, 2017, 11:12am UTC](https://forum.ionicframework.com/t/hide-tabs-on-keyboard-open/88577 "2017-05-02T11:12:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mystearica](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@Mystearica](https://forum.ionicframework.com/u/Mystearica)\
**Post date:** [May 2, 2017, 11:12am UTC](https://forum.ionicframework.com/t/hide-tabs-on-keyboard-open/88577/1 "2017-05-02T11:12:27Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![dmehta17](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@dmehta17](https://forum.ionicframework.com/u/dmehta17)\
**Post date:** [July 27, 2018, 1:13pm UTC](https://forum.ionicframework.com/t/hide-tabs-on-keyboard-open/88577/2 "2018-07-27T13:13:22Z")

</div>

hey did you figure out a way to fix this?

---

<div class="post-metadata">

**Author:** ![neilbo21](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neilbo21/32/119158_2.png) [@neilbo21](https://forum.ionicframework.com/u/neilbo21)\
**Post date:** [November 9, 2018, 5:46am UTC](https://forum.ionicframework.com/t/hide-tabs-on-keyboard-open/88577/3 "2018-11-09T05:46:22Z")

</div>

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**

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

```

See docs: [https://ionicframework.com/docs/native/keyboard/](https://ionicframework.com/docs/native/keyboard/)

**2. Followed pretty much the fix here:**

> <https://github.com/ionic-team/ionic/issues/7047>

**app.component.ts**  
import keyboard

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

```

add to constructor

```auto
public keyboard: Keyboard 

```

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

```auto
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

```auto
body.keyboard-is-open {
    div.tabbar.show-tabbar {
        display: none;
    }
    scroll-content {
        margin-bottom: 0 !important;
    }
}

```

---

<div class="post-metadata">

**Author:** ![kiruthi97](https://avatars.discourse-cdn.com/v4/letter/k/e68b1a/32.png) [@kiruthi97](https://forum.ionicframework.com/u/kiruthi97)\
**Post date:** [November 15, 2018, 10:50am UTC](https://forum.ionicframework.com/t/hide-tabs-on-keyboard-open/88577/4 "2018-11-15T10:50:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![neilbo21](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neilbo21/32/119158_2.png) [@neilbo21](https://forum.ionicframework.com/u/neilbo21)\
**Post date:** [November 23, 2018, 1:55am UTC](https://forum.ionicframework.com/t/hide-tabs-on-keyboard-open/88577/5 "2018-11-23T01:55:27Z")

</div>

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

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

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

```