Beta 14 - Issues with Nav Bar

ionic-v1
21

I ran into some issues when working with the Ionic framework’s (v1.0.0-beta.14) sidemenu template and nested states:

-> http://robferguson.org/2015/01/07/ionics-sidemenu-template-and-nested-states/

1 Like
22

Hello!

I have the same issue and I have notived an interesting thing while inspecting code.
Title appears only when nav-bar=“cached” is before nav-bar=“active”.

Title “Titre 1” is displayed :

<ion-nav-bar class="bar-calm balanced-border nav-title-slide-ios7 nav-bar-container" align-title="center" nav-bar-transition="ios" nav-bar-direction="swap">
    <div class="nav-bar-block" nav-bar="cached">
        <ion-header-bar class="bar-calm balanced-border nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="center">
            <div class="title title-center header-item" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(-889.13623046875px, 0px, 0px); opacity: 0;">Titre 2</div>
        </ion-header-bar>
    </div>
    <div class="nav-bar-block" nav-bar="active">
        <ion-header-bar class="bar-calm balanced-border nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="center">
            <div class="title title-center header-item" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0px, 0px, 0px);">Titre 1</div>
        </ion-header-bar>
    </div>
</ion-nav-bar>

None title is displayed :

<ion-nav-bar class="bar-calm balanced-border nav-title-slide-ios7 nav-bar-container" align-title="center" nav-bar-transition="ios" nav-bar-direction="swap">
    <div class="nav-bar-block" nav-bar="active">
        <ion-header-bar class="bar-calm balanced-border nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="center">
            <div class="title title-center header-item" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0px, 0px, 0px);">Titre 1</div>
        </ion-header-bar>
    </div>
    <div class="nav-bar-block" nav-bar="cached">
        <ion-header-bar class="bar-calm balanced-border nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="center">
            <div class="title title-center header-item" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(-889.13623046875px, 0px, 0px); opacity: 0;">Titre 2</div>
        </ion-header-bar>
    </div>
</ion-nav-bar>

Any trick to resolve this issue?

23

mhartington of Ionic has good blog on the ionic site about how navigation works. This helpen me a lot to convert my to beta.14

http://ionicframework.com/blog/navigating-the-changes/

24

same problem here.
navigating to other states hides everything in the nav-bar.
perhaps someone have dom structures that works with multiple states and views?

thx

25

I have solved this issue with using the nightly css version.

Is it possible to download the scss file from the nightly version?

26

I think this is part of this thread… although on current RC4 build

we were having trouble with nav-bar flickering horribly between child state transitions, but on Android only…

so i put this into the config phase
$ionicConfigProvider.views.transition ‘ios’

to force ionic to go ‘ios’ instead of ‘platform’ and with this, no more flicker…

I think the android implementation is problematic for some reason (css?), so we’re going to use ios for now, but if somebody is in that code, would be nice to fix this.

27

Hey, I have the exact same issue, navbar flickers horribly when changing state… And forcing “ios” didn’t help. Does someone have something new about this ?

28

@mhartington why [nav-bar=“cached”] has ‘display:block’ ? this is defined in ionic.css at line 7640 in v1.1.0