How to hide the Tab Bar when Keyboard is open

ionic-v1
1

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>
1 Like
2

For anyone having this same problem the solution is here: Hide footer when keyboard appear

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)

2 Likes
3

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

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" />
3 Likes
5

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

6

Good, It work for me. Thanks a lot.

7

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

1 Like
8

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

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.

9

Great Thanks! Works well for me. I shared your solution with another post inside forum:hide-tabs-when-keyboard-open-android

10

Hi all, this worked perfectly for me: How to hide tabs when keyboard open?

11

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

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