How to hide tab bar? [Closed]

How can i hide tab bar for a particular view ?

i have nested views where i want to hide tab bar in one of the nestesd view !
I tried using ng-class= “{ ‘tabs-item-hide’: hideTabBar}” but since my tab bar is in parent scope and when i modify hideTabBar using my child scope it does not work !

1 Like

Doesn’t seem like it will be possible right now

Not sure if this will be helpful, but I’ve delt with something similar to this, not exactly the same, but similar.

$scope.global = {};

$scope.global.showTabs = false;
$rootScope.$on("$locationChangeStart", function(event, next, current) { 
    if(next.indexOf("#/labs/results/details") > -1){
		$scope.global.showTabs = true;
	} else {
		$scope.global.showTabs = false;
	}
});

Did you try something like that in your parent’s controller, not the child controller?

but it will check for every route change ! will it not effect performance ? @andrewmcgivery

i have the same requirement as you,

i have 3 “main” views where i want to show the tab and some subviews where i don’t want them so i gain more space on view.

There are multiple options to archive this.
first something like you mentioned using ng-hide=“hideTab” with a $rootScope variable.
you can then set in your view controller true or false. (not tested)

second what i did:

Structure:

  • main.html
    –> tabs.html
    —> homeTabOne.html
    —> homeTabTwo.html
    —> homeTabThree.html
    –> all other views

so in short i run all Tab based Views in the tabs.html
and all other in main.html

the routing will look like this:

.config(($stateProvider, $urlRouterProvider) => {
        console.log("**** app.config.routers");

        $stateProvider
            .state('main', {
                url: "",
                abstract: true,
                templateUrl: "views/main.html"
            })

            .state('main.tabs', {
                url: "/tab",
                abstract: true,
                views: {
                    'main-content': {
                        templateUrl: "views/tabs.html",
                    }
                }
            })
        // --------- Tabs ---------
            .state('main.tabs.homeTabOne', {
                url: "/homeTabOne",
                views: {
                    'home-tab': {
                        templateUrl: "views/homeTabOne/home.html",
                        controller: "homeTabOneController"
                    }
                }
            })
            .state('main.tabs.homeTabTwo', {
                url: "/homeTabTwo",
                views: {
                    'about-tab': {
                        templateUrl: "views/homeTabTwo/home.html",
                        controller: "homeTabTwoController"
                    }
                }
            })
            .state('main.tabs.homeTabThree', {
                url: "/homeTabThree",
                views: {
                    'contact-tab': {
                        templateUrl: "views/homeTabThree/homeTabThrees.html",
                        controller: 'homeTabThreesController'
                    }
                }
            })

		// --------- homeTabOne ---------
            .state('main.homeTabOneAdd', {
                url: "/homeTabOne/add",
                views: {
                    'main-content': {
                        templateUrl: "views/homeTabOne/add.html",
                        controller: "AddhomeTabOneController"
                    }
                }
            })
            .state('main.homeTabOneChange', {
                url: "/homeTabOne/change",
                views: {
                    'main-content': {
                        templateUrl: "views/homeTabOne/change.html",
                        controller: 'homeTabOneChangeController'
                    }
                }
            })
        // --------- homeTabTwo ---------
            .state('main.homeTabTwoAdd', {
                url: "/homeTabTwo/add",
                views: {
                    'main-content': {
                        templateUrl: "views/homeTabTwo/add.html"
                    }
                }
            })
            ...
        // --------- homeTabThree ---------
            .state('main.homeTabThreeAbout', {
                url: "/homeTabThree/about",
                views: {
                    'main-content': {
                        templateUrl: "views/homeTabThree/about.html"
                    }
                }
            })
			...
        ;
        $urlRouterProvider.otherwise("/tab/homeTabOne");

    })

main.html:

<ion-nav-bar class="bar-positive avant" animation="nav-title-slide-ios7" ></ion-nav-bar>
<ion-nav-view  name="main-content"></ion-nav-view>

tabs.html

<ion-tabs class="tabs-icon-top" >
    
    <ion-tab title="tabOne" icon="ion-one" href="#/tab/homeTabOne">
        <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="TabTwo" icon="ion-two" href="#/tab/homeTabTwo" id="step2">
        <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab titleTabThree" icon="ion-ios7-gear-outline" ui-sref="main.tabs.homeTabThree">
        <ion-nav-view name="contact-tab"></ion-nav-view>
    </ion-tab>

</ion-tabs>

one of the bad things with this method: routing and transitions do not really work :-/

Hi!

I had the same requirement and managed to find a pretty quick fix.

First off in your tabs file include the ng-class:

<ion-tabs class="tabs-icon-only tabs-feely" ng-class="$root.tabsHidden">

Second add this to your css file:

.tabs-hide .tabs {
    display: none;
}

Third include this in the controller of every page where you want to hide the tab bar:

$scope.$root.tabsHidden = "tabs-hide";

Of course, when routing back from any page with hidden tab bar you need to remove this class to show it again.

Hope this helps, it sure did help me :smiley:

8 Likes

Hi,

I’m using your fix to hide my tab bar and It’s almost perfect. The problem is that the tab bar still exists (transparent). If I analize the CSS in runtime I can see that the “.has-tabs” attribute has this parameter: “bottom: 49px”.
How can I fix that?

Thank you.

Is there another way to hide the tabs?

 .bar-footer.has-tabs  {
      bottom: 0px;
    }
    
    .has-footer.has-tabs {
      bottom: 44px;
    }

I have a footer and this works for now. I have to clean up the css.

Is this possible yet?

Not officially part of Ionic, but it is possible to build you’re own directive to handle it. Like I’ve done here.

4 Likes

Hi, I implemented it and it works great when I link from one page with tabs to another without. However when I link to page without tabs to another without tabs then it doesn’t hide that last pages’ tab bar.

Any tips to make sure its fully implemented?

Also this fairly common on iOS for ‘detail’ pages, any thoughts on it going into core?

Please provide an example.

Hi, I am using this

  <!-- Info Tab -->
<ion-tab title="" icon-off="ion-android-more-vertical" icon-on="ion-android-more-vertical" href="#/tab/account">
    <ion-nav-view name="tab-info"></ion-nav-view>
  </ion-tab>

under info tab a template is loaded with list links, as this below

<ion-view view-title="Info">
 <ion-nav-bar>
      <ion-nav-back-button>
      </ion-nav-back-button>
 </ion-nav-bar>
  <ion-content>
    <ion-list>
          <ion-item class="item-remove-animate item-icon-right" type="item-text-wrap" href="#/tab/AboutUs">
              <h2>About Us</h2>
              <i class="icon ion-chevron-right icon-accessory"></i>
          </ion-item>

</ion-item>
</ion-list>
</ion-content>
</ion-view>

When about us is clicked, I want to load aboutus without these tabs. about page is below

<ion-view hide-tab-bar view-title="About">
     <ion-nav-bar>
      <ion-nav-back-button>
      </ion-nav-back-button>
 </ion-nav-bar>
   <ion-content class="padding">
        <h3>Wedel / About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Aenean euismod bibendum
        laoreet. Proin gravida dolor sit amet lacus
        accumsan et viverra justo commodo. Proin
        sodales pulvinar tempor. Cum sociis natoque
        penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Nam fermentum, nulla
        luctus pharetra vulputate, felis tellus mollis orci
        , sed rhoncus sapien nunc eget odio.</p>
    </ion-content>
</ion-view>

i have included js, css and hide-tab-bar, But this does not work, I am new to this please help me out with this :slight_smile:

Take a look at this demo.

2 Likes

Thats what i’m after! Assuming this is only in the nightly release.

No, this is a custom directive I wrote.

1 Like

I use your directive and it works perfect. Thank you!

Hi ! I used the code @mhartington wrote, is there any way to show the hidden tabs ?

<ion-view show-tab-bar > 
</ion-view>

just like that ? Please Help me. Thanks

No, you would just not add the directive.