# How to hide the Tab Bar when Keyboard is open

**URL:** <https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723>\
**Category:** ionic-v1\
**Created:** [October 6, 2014, 11:22pm UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723 "2014-10-06T23:22:31Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![rodneyjoyce](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@rodneyjoyce](https://forum.ionicframework.com/u/rodneyjoyce)\
**Post date:** [October 6, 2014, 11:22pm UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/1 "2014-10-06T23:22:31Z")

</div>

I have tabs which contain their own ion-nav-view. When you click on the tab it loads that view into it’s ion-nav-view. This all works fine. Inside the tab that is loaded is a form and I would like to hide the Tabs when the keyboard is shown. The documentation says to use **class=“hide-on-keyboard-open”** however, if I put this on the TABS class below then it contains the child view that is loaded so the whole view dissappears when the keyboard is shown, which is not what i want. So how can i tell just the Tab Bar to disappear when the keyboard is shown?

```
<ion-tabs class="tabs-light tabs-icon-top **hide-on-keyboard-open**">
    <ion-tab title="Find a Game" ui-sref="app.tabs.gamesMap">
        <ion-nav-view name="tab-gamesMap"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Games List" ui-sref="app.tabs.gamesList">
        <ion-nav-view name="tab-gamesList"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Add a Game" ui-sref="app.tabs.gameAdd">
        <ion-nav-view name="tab-gameAdd" animation="no-animation"></ion-nav-view>
    </ion-tab>
</ion-tabs>
```

---

<div class="post-metadata">

**Author:** ![rodneyjoyce](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@rodneyjoyce](https://forum.ionicframework.com/u/rodneyjoyce)\
**Post date:** [October 8, 2014, 9:23pm UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/2 "2014-10-08T21:23:41Z")

</div>

For anyone having this same problem the solution is here: [Hide footer when keyboard appear](http://forum.ionicframework.com/t/hide-footer-when-keyboard-appear/9254/6?u=rodneyjoyce)

You have to add this CSS. The only bug I can see is when using angular Google maps and the tab bar with an input on Android; the tabs do not reappear when the keyboard closes (works fine on other platform and screens)

---

<div class="post-metadata">

**Author:** ![perqa](https://avatars.discourse-cdn.com/v4/letter/p/58f4c7/32.png) [@perqa](https://forum.ionicframework.com/u/perqa)\
**Post date:** [November 23, 2014, 1:50pm UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/3 "2014-11-23T13:50:13Z")

</div>

This worked for me. A requirement is that you first install the keyboard plugin.

HTML:

```
<ion-tabs class="tabs-icon-top" keyboard-handler>

```

Directive:

```
   .directive('keyboardHandler', function ($window) {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            angular.element($window).bind('native.keyboardshow', function() {
                element.addClass('tabs-item-hide');
            });

            angular.element($window).bind('native.keyboardhide', function() {
                element.removeClass('tabs-item-hide');
            });
        }
    };
})
```

---

<div class="post-metadata">

**Author:** ![meghdad](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meghdad/32/6906_2.png) [@meghdad](https://forum.ionicframework.com/u/meghdad)\
**Post date:** [March 6, 2015, 1:38am UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/4 "2015-03-06T01:38:36Z")

</div>

This worked for me.  
add this line to `app.js`:

```
ionic.Platform.isFullScreen = true;

```

add this line to `config.xml`:

```
<preference name="Fullscreen" value="true" />
```

---

<div class="post-metadata">

**Author:** ![Mik378](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mik378/32/7777_2.png) [@Mik378](https://forum.ionicframework.com/u/Mik378)\
**Post date:** [April 14, 2015, 4:48pm UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/5 "2015-04-14T16:48:53Z")

</div>

@meghdad Works but forced to make the app fullscreen…losing the status bar.

---

<div class="post-metadata">

**Author:** ![Justin\_lu](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/justin_lu/32/80448_2.png) [@Justin\_lu](https://forum.ionicframework.com/u/Justin_lu)\
**Post date:** [May 6, 2015, 4:07am UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/6 "2015-05-06T04:07:26Z")

</div>

Good, It work for me. Thanks a lot.

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [June 28, 2015, 3:12pm UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/7 "2015-06-28T15:12:17Z")

</div>

Nice! It works but is a little bit jumpy - but a whole lot better than nothing.

---

<div class="post-metadata">

**Author:** ![zapnap](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/zapnap/32/79117_2.png) [@zapnap](https://forum.ionicframework.com/u/zapnap)\
**Post date:** [July 1, 2015, 1:26am UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/8 "2015-07-01T01:26:10Z")

</div>

Full screen really isn’t a great solution to this (removes status bar, etc). Switching from adjustResize to adjustPan works for me, but obviously isn’t ideal either for reasons described here: [http://developer.android.com/guide/topics/manifest/activity-element.html](http://developer.android.com/guide/topics/manifest/activity-element.html)

Is there a github issue for this? Has the core team acknowledged this as a bug? Seems to be from my pov… would love to know if there’s a proper solution.

---

<div class="post-metadata">

**Author:** ![abelzhan](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@abelzhan](https://forum.ionicframework.com/u/abelzhan)\
**Post date:** [July 14, 2015, 9:21am UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/9 "2015-07-14T09:21:00Z")

</div>

Great Thanks! Works well for me. I shared your solution with another post inside forum:[hide-tabs-when-keyboard-open-android](http://forum.ionicframework.com/t/hide-tabs-when-keyboard-open-android/16517/10)

---

<div class="post-metadata">

**Author:** ![imaxo](https://avatars.discourse-cdn.com/v4/letter/i/3e96dc/32.png) [@imaxo](https://forum.ionicframework.com/u/imaxo)\
**Post date:** [August 10, 2015, 12:01am UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/10 "2015-08-10T00:01:40Z")

</div>

Hi all, this worked perfectly for me: [How to hide tabs when keyboard open?](http://forum.ionicframework.com/t/how-to-hide-tabs-when-keyboard-open/20268)

---

<div class="post-metadata">

**Author:** ![nicksonyap](https://avatars.discourse-cdn.com/v4/letter/n/71e660/32.png) [@nicksonyap](https://forum.ionicframework.com/u/nicksonyap)\
**Post date:** [April 16, 2016, 7:14am UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/11 "2016-04-16T07:14:43Z")

</div>

Sorry for bumping this thread, but I solved the problem with the script @perqa wrote.  
On Android, when keyboard shows the tab becomes a white tab bar instead of really hiding until user begins typing or selecting another input text area.

HTML:

`<ion-tabs class="tabs-icon-top" keyboard-handler>`  
Directive:

```
   .directive('keyboardHandler', function ($window, $timeout) {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            angular.element($window).bind('native.keyboardshow', function() {
                element.addClass('tabs-item-hide'); // tries to hide tab but becomes blank space instead
                $timeout(function() {
                    element.addClass('tabs-item-hide'); //remove blank space quickly
                 }, 0);
            });

            angular.element($window).bind('native.keyboardhide', function() {
                element.removeClass('tabs-item-hide');
            });
        }
    };
})
```

---

<div class="post-metadata">

**Author:** ![hdvest](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@hdvest](https://forum.ionicframework.com/u/hdvest)\
**Post date:** [March 10, 2017, 4:12pm UTC](https://forum.ionicframework.com/t/how-to-hide-the-tab-bar-when-keyboard-is-open/10723/12 "2017-03-10T16:12:24Z")

</div>

> [@perqa](#):
>
> keyboard-handler

This is not for ionic2 right? Is there a version of this for ionic2?