Impossible to hide navbar on Tab Page

[Yagger]

Short description of the problem:

For the Tab Page, when avoiding <ion-navbar> tag on page template,the <ion-navbar-section> component is still generated and the black header is visible.

What behavior are you expecting?

Avoiding <ion-navbar *navbar> tag should not generate Navbar component.

Steps to reproduce:

1. Start the Ionic2 Tabs app ionic start TabsTest tabs --v2
2. Edit /project/root/app/pages/page1/page1.html and remove

<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

1. Start the app with ionic serve and note the black header
   Screenshot here: https://www.evernote.com/l/AlqDypkUy5pEyJ9qUNrsM7bk-ZXJxGHtgsU

Ionic Version: 2.x

Browser & Operating System: Chrome

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002

[davyzhang]

ion-navbar-section {
display: none;
}

will be a workaround

[Yagger]

@davyzhang , CSS is a not worthy workaround as it will apply the style globally and all pages will be affected. While what we want is to customise a certain pages only.

[jgw96]

@Yagger are you still experiencing this issue with beta.3?

[Yagger]

@jgw96 yes i do

[padho]

This is definitely an issue. My workaround at the moment is:

ion-tabs ion-navbar-section { display: none; }

[adamdbradley]

This is actually a challenge, because how will the app react when it transitions between pages with a navbar, and ones without?

[cismous]

@adamdbradley NavPop

[marcus-robinson]

@Yagger here is a solid workaround that has done me well:

//hide nav bar when we enter the page
    onPageWillEnter() {
        document.getElementsByTagName("ion-navbar-section")[0].style.display = "none";
    }

//show nav bar when we leave the page
    onPageDidLeave() {
        document.getElementsByTagName("ion-navbar-section")[0].style.display = "block";
    }

[Yagger]

@adamdbradley if you mean animation-wise, then I don't know much about its mechanics, and as you said on one of the conferences, its complex, so you definitely know better. Otherwise I don't get the challenge behind it and don't have any ideas to help. If you can describe the challenge better, then may be the community will be able to throw few ideas in. But, at least in my case, this functionality is important. I have lists of items with the custom header (or without one), and the item pages with the standard navbar and back button. Then the other tabs have their own looks. I suppose in the custom look apps this will be a common requirement. Thanks!

[Yagger]

@marcus-robinson thanks for a hint!

[WhatsThatItsPat]

I'm hoping header shrink will be resurrected for v2 which might cover some use cases here.

[no1101]

You can achieve navbar hiding animaton in Ionic2 like this:

  ngAfterViewInit(){ 
    this.content.addScrollListener(this.myScroll);
  }

  myScroll(e) {
        let elem = document.getElementsByTagName("ion-navbar")[0];
        let hidden = elem.classList.contains("hiddennav");

        if(e.target.scrollTop>60 && !hidden) elem.classList.add('hiddennav');
        else if(e.target.scrollTop<60 && hidden) elem.classList.remove('hiddennav');
  }

.hiddennav { 
    transition: min-height 0.4s, opacity 0.5s ease-out;
    min-height: 0 !important;
    opacity: 0 !important; 
    height: 0 !important;
    overflow: hidden !important;  
}

[adamdbradley]

Thanks for the report, this should be fixed in the next release. Thanks!

[SegoleneM]

Thanks for the fix ! But now it hides the navbar even if there is one in the parent page containing the tabs...

[Yagger]

@adamdbradley confirm it works, thanks for update!

[brandyscarney]

@SegoleneM Could you create a separate issue for this with more information? Maybe a code sample or plunker? Thanks! 😄

[SoldierCorp]

How can I get the same config of @marcus-robinson but using typescript? Because I'm receiving this error:

Property 'style' does not exist on type 'Element'

[Lyubomyr]

https://gist.github.com/MT--/505a1c385f08fa1b0d6f6f3648ddf582

[dregos]

This is still not fixed? Or am I missing something?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.