Ionic Hide Tabs

its not working broo :confused:

I’ll work on beta 11 only

am working in beta 11… prblm is tha my root page is login page and when successfully login move to tabs page but when i logout from home page and set root page to login page its still display … on hoempage its show nothing all reming page show.:worried: ionicBootstrap(App, { platforms: { android: { tabsPlacement: 'top', tabsHideOnSubPages: true, tabsHighlight: true } } });
image

1 Like

You can still use the document.querySelector("ion-tabbar").style.display = 'none' when you perform logout

error on style… TypeError: Cannot read property ‘style’ of null
and also ionic-tabbar change to ionic-tabs…?

1 Like

I find a solution how to hide ion-tabbar:

document.querySelector("ion-tabbar")['style'].display = 'none';

And if you need show them again:

document.querySelector("ion-tabbar")['style'].display = 'flex';

Hope it helps :slight_smile:

2 Likes

Hi,
The solution worked for the first time, but when I load the same page, with its tabs set to hide, the tabs are visible again.
I use Ionic 2.0.0 RC0 and that’s my code:

ionViewDidEnter() {
    let elem = <HTMLElement>document.querySelector(".tabbar");
    if (elem != null) {
      elem.style.display = 'none';
    }
  }
6 Likes

@behnamazimi did you find a solution?

If no maybe are you facing problem as I do (which explain why document.querySelector doesn’t select the right div)

No, unfortunately I could not find any solution yet.
and Yes, I have the same problem!

Thx for the feedback. Kind of happy to hear it, spent so many hours on that today…hope the github issue gonna brings something

not good. it’s working, but… when I go back Tabs also hidden

@nganngan @behnamazimi guyz, till there is a proper fix, I extended your script @behnamazimi like following. Even if many ion-tabs bar exists in the dom, all gonna be set as hidden. That makes the tricks for me.

let elements = document.querySelectorAll(".tabbar");

    if (elements != null) {
        Object.keys(elements).map((key) => {
            elements[key].style.display = 'none';
        });
    }
11 Likes

Thanks a lot!
that’s it

1 Like

This is definitely a hack, but it looks nice. I would create a directive for this at some point. You should adjust the lifecycle events to taste/feel depending on how you want the transition to look.

ionViewWillEnter() {
    let tabs = document.querySelectorAll('.tabbar');
    if ( tabs !== null ) {
      Object.keys(tabs).map((key) => {
        tabs[ key ].style.transform = 'translateY(56px)';
      });
    } // end if
  }

  ionViewDidLeave() {
    let tabs = document.querySelectorAll('.tabbar');
    if ( tabs !== null ) {
      Object.keys(tabs).map((key) => {
        tabs[ key ].style.transform = 'translateY(0)';
      });
    } // end if
  }
5 Likes

I quite like your solution with translate instead of display:hide @mt__ (sometimes my content was trimmed and I had to add padding, thx)

You’re right that it’s quite an ugly hack, but didn’t find any better solutions. If you or anyone has a better idea, it will be most welcomed :slight_smile:

When I use this code, it hide the tabs bar but when I go back to the previous page, how can i get the tab bar back?

You can do something like following:

private displayTab(display:boolean) {
    let elements = document.querySelectorAll(".tabbar");

    if (elements != null) {
        Object.keys(elements).map((key) => {
            elements[key].style.transform = display ? 'translateY(0)' : 'translateY(56px)';
        });
    }
}

But as noticed here, quite hacky, still not testing and finding a proper solution…but for the moment…

1 Like

I am very new with Ionic(2). The code works for me, I test it with buttons event. But when I the function in the constructor part it doesn’t start the function again when I come back to the page with the back function.

Ionic 1 has a function like:

$scope.$on("$ionicView.enter", function(event, data){
   this.displayTab(true);
});

you are maybe looking for ionViewWillEnter() or ionViewDidEnter()

1 Like

Guyz, with that hack I was facing the following error debugging in Xcode (was still working but let a trace in the console):

Unhandled Promise rejection: Attempted to assign to readonly property.

So I modified it like following, just in case you run into the same thing:

private displayTab(display:boolean) {
    var elements:NodeListOf<Element> = document.querySelectorAll(".tabbar");

    this.transformTab(elements, display).then(() => {
        // Do nothing, alright
    })
}

private transformTab(elements:NodeListOf<Element>, display:boolean):Promise<{}> {
    return new Promise((resolve) => {
        if (elements != null) {
            for (let i:number=0; i<elements.length; i++) {
                (<HTMLElement> elements[i]).style.transform = display ? 'translateY(0)' : 'translateY(56px)';
            }

            resolve();
        }
    });
}