Ionic-framework: bug: ion-nav-bar hide-nav-bar="true" affects all views

[nickcmaynard]

Type: bug

Platform: all

The has-header class is added/removed from all views during transition, not just from the view with the hidden header.

This causes a layout call to a view that shouldn't be affected.

This issue can be seen easily here:
http://codepen.io/mhartington/pen/qEgRLK

When "Scientific facts" is clicked, the content of the Home view "jumps" up as its padding is removed.

has-header should continue to be applied to views that do not have hide-nav-bar="true".

To work around this in the short term, I've used these CSS rules:

/* Work around issue with flickering while showing/hiding the nav bar */
ion-nav-view ion-view:not([hide-nav-bar="true"]) ion-content {
    top: 44px;
}
ion-nav-view ion-view[hide-nav-bar="true"] ion-content {
    top: 0;
}
.platform-ios.platform-cordova:not(.fullscreen) ion-nav-view ion-view:not([hide-nav-bar="true"]) ion-content {
    top: 64px;
}
.platform-ios.platform-cordova:not(.fullscreen) ion-nav-view ion-view[hide-nav-bar="true"] ion-content {
    top: 22px;
}

[perrygovier]

I see what you mean. Thanks

[Duffycola]

This issue affects me similarly in a scenario where my initial screen is a welcome screen where I hide the navbar and then the user starts to navigate into the app where I want the navigation bar to be visible.

My first thought was that the hide-nav-bar="true" sets display: none; when visibility: hidden; would probably do the trick alternatively while still taking up space.

Thanks for the CSS workaround in the meantime, but it still has other side effects as the navbar is animated on top of the old view while the new view enters.

[jesusmartinoza]

Thanks. Other fix I found is remove the tag from de second view.

[berndartmueller]

Thank you for the CSS fix. But did someone tackle the animated navbar on top of the old view while the new view enters?

[jgw96]

Hello! Are you all still experiencing this issue?

[jgw96]

Hello! Thanks for opening an issue with us! Since it has been a little while since there was any activity on this issue i will be closing it, but feel free to respond back if your still having the issue! Thanks again!

[nwocykra]

This issue is still present in 1.3.0 and it looks like the stylesheet fix does no longer work.

[xumingxin7398]

This issue is still present in 1.3.4 and it looks like the stylesheet fix does no longer work.

[GarettRogers]

Can this please be reopened? It's still an issue.

[bklusekemper]

I also experience this issue! Please reopen!

[kas84]

Same problem here!

My workaround was using hide-nav-bar=true in all subsequent views and handling the back button myself. Seems to work pretty well.

[ionitron-bot[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.