Ion-nav-bar breaks in transition from 0.9.27 to 1.0.0-beta.1

ionic-v1
1

Attempting to stay current, but having a strange issue come up and can’t figure it out. Changing from the v0.9.27 build to v1.0.0-beta.1 causes the following page to break. Can’t figure out what is causing it and curious if there was a change in the appropriate way to do this.

The specific problem is the header bar and side menus.
After the update:

  • the formatting on the nav-bar disappears (but the bar and title are there)
  • the header bar menu button (used to toggle the side-menu) disappears
  • the side-menu is no longer accessible

This is my index.html

<body animation="slide-left-right-ios7">

  <ion-side-menus>
    <!-- Center content -->
    <ion-pane ion-side-menu-content drag-content="false">
      <ion-nav-bar type="bar-dark" 
         animation="nav-title-slide-ios7" 
         back-button-type="button-icon" 
         back-button-icon="ion-arrow-left-c"></ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-pane>
  
    <!-- Left menu -->
    <ion-side-menu side="left">
      <div class="list">
        <div class="item item-divider item-dark">Menu</div>
        <a nav-clear menu-close ng-href="#/" class="item item-icon-left"><i class="icon ion-home"></i>Home</a>
        <a nav-clear menu-close ng-href="#/link1" class="item item-icon-left"><i class="icon ion-briefcase"></i>link1</a>
        <a nav-clear menu-close ng-href="#/link2" class="item item-icon-left"><i class="icon ion-archive"></i>link2</a>
      </div>
    </ion-side-menu>
  </ion-side-menus>
2

When looking at your post now, is that the complete code that you wanted to include in your post?

3

no, and actually doesn’t include what’s breaking
trying to fix it now but the ion-pane and ion-nav-bar tags seem to be breaking it

4

Just paste the code, select the whole block of code and press the code button in the editor:

5

Apologies - haven’t had to past code in the past. The code I was trying to paste has been updated and is showing now. When I did it initially it wasn’t showing up.

6

No worries, glad you got it to work.

I would advise having a look at the official Codepen example for sidebar menu with navbar to see where your code differs. This Codepen example is using the 1.0.0 beta1 so the code in this example is the working syntax.

Check it out here:
http://codepen.io/ionic/pen/tcIGK

7

Yeah, and it would help if I read the release notes regarding the specific changes I’m having issues with referenced here:

Still - I’m having trouble with the ion-nav-back-button being on the index page with the nav-views loading from other templates. It is there in the code, but not rendering on other pages correctly.

Here’s my index page code:

<ion-side-menu-content drag-content="false">
      <ion-nav-bar class="bar-dark slide-left-right">
        <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view class="slide-left-right"></ion-nav-view>
    </ion-side-menu-content>

Here’s the start of my template page:

<ion-view title="Pages List">
  <ion-content>
    <div class="list">
      <a ng-repeat="">
    </div>
  </ion-content>

Here’s what chrome is rendering: Note the “hide” class in ion-nav-back-button
Not sure why it’s being hidden.

<ion-side-menu-content drag-content="false" class="menu-content pane disable-user-behavior menu-animated" style="-webkit-transform: translate3d(0px, 0px, 0px);">
      <ion-nav-bar class="bar-dark slide-left-right bar bar-header nav-bar disable-user-behavior  no-animation">
        <ion-nav-back-button class="button-icon ion-arrow-left-c button back-button disable-user-behavior hide"></ion-nav-back-button>
      <div class="buttons left-buttons"> </div><h1 ng-bind-html="title" class="title ng-binding" style="left: 40px; right: 40px;">Pages Listt</h1><div class="buttons right-buttons"> </div></ion-nav-bar>
      <ion-nav-view class="slide-left-right"><ion-view class="pane">
  <ion-content class="scroll-content  has-header has-footer"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px);">
    <div class="list">
      <!-- ngRepeat: page in pages --><a ng-repeat="page in pages"
8

Figured it out - nav-clear in the menu was causing it.

1 Like