Beta 14 nav bar

1

Hello! In attempt to upgrade to beta 14 I am having a few issues with the nav bar. I read the docs on the navigation and view changes, and have changed all ion-view titles to view-titles, all left/right nav buttons to primary/secondary, and all animation attributes to nav-transition=“ios”

After clearing cache and running the new cli lab, the nav bar for every view is blank with no buttons or title.

are there any other breaking changes, or anything not documented that may be causing this? Just wanted to check before digging into this or going down the wrong path.

Thanks!!

2

Can you provide a codepen of what you have?

3

Figured it out. If a nav bar is present on a view, nav buttons must be nested inside the nav-bar for them to show.

:slight_smile: thanks for the quick reply though @mhartington !

1 Like
4

I have the same problem. This is a fragment of my html view:

<ion-view>
   <ion-nav-title>{{Title}}</ion-nav-title>
   <ion-nav-buttons side="secondary">
    <button ng-repeat="button in buttons" ng-click="button.action()" ng-class="\'button button-icon icon \' + button.icon"> {{button.text}} </button>
    <button class="button button-icon ion-ios7-plus-empty" ng-if="buttonsDropDown.length" ng-click="showPopover($event)"></button>
  </ion-nav-buttons>
</ion-view>

What is incorrect in my ion-nav-tittle and ion-nav-buttons?

5

@bjedrzejak try wrapping the ion-nav-buttons inside a ion-nav-bar directive. The example at http://ionicframework.com/docs/api/directive/ionNavTitle/ didnt work for me, but when I added the ion-nav-bar inside the ion-view and then nested the nav buttons, it appeared again.

I’m not sure if this is the best practice or a hack though…

6

Unfortunatelly, I’ ve tried it before and nothing’s happened. It’s strange behaviour. Does anyone has the same problems?

7

Hi there!
I just figured that i had to run gulp watch again. Even if you haven’t made any title/header changes in sass just run gulp watch. If you are using .css you could try to refresh those files.

8

I’ve used current ( beta 14) version of css file. There should be other problem.

9

Sorry I ended up rolling back to Beta 13 due to the choppy animations (might be something pertaining to my app, not blaming ionic until i put a code oen up :smile: ) but for now i’m going back to beta 13

10

@djett Choppy animations? Where?

11

@mhartington yes I’m seeing a flicker on every page transition with a white background on the sliding view, even the header/nav bar turned white while sliding. I was using nav-direction=“forward” on a button or anchor with a ui-sref. Also saw a black background and flicker a few times. I was showing someone the app I’m building so I temporarily rolled back, but I’ll take a look at it in the near future and create a code pen if i cant figure it out. :smile:

Thanks,
Devin

12

Yeah, I’d be interested in seeing if you could replicate it.
We’ve tested beta 14 like crazy and didn’t have any flickering.

Maybe some conflicting css?

13

Thats what im thinking @mhartington although I couldn’t determine what on first glance. It may have something to do with the HTML elements as well, can nav-direction elements be placed on any nav related element? (anchor/button/nav bar etc.) Or only specific ones? I couldn’t exactly tell from the docs. I’ll try to get a code pen up this week.

Thanks again!

14

No, it can be placed on any link or button.

Let me know when you get that codepen together

15

Thanks,

I see it again . Do I have to have all of my HTML in one single page for code pen? Or is there a way to add multiple templates I can reference from the stateProvider? Or do I need to add templates in scripts?

16

For codepen, you template scripts.

17

ok i figured what i was doing to get choppy animations… i had multiple nav-bars throughout the app rather than just one on the index with child states inheriting. So basically I needed to just add a blank nav-bar to the index.

I created a codePen however now I have some questions regarding the animations and nav flow. I’ll create a separate thread thanks @mhartington !

1 Like
18

Nice i got this same problem and your comment helped me!

1 Like