No back button in your Ionic header?

A few months ago I wrote up a quick article about titles not correctly updating in Ionic V1 apps (Is your Ionic View title not updating?). Today I’ve run into another little issue with the header. I was working on a very quick demo for a presentation tonight and had an app with a grand total of two views - a master list and detail. Everything was working fine, but then I noticed I didn’t have a back button when looking at the detail view. As far as I could tell, my code was fine. Here’s what I had in the index.html file:


<ion-nav-bar>
        <ion-nav-back-button>Back</ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

And each view was pretty simple as well. You can see the problem in action at this CodePen: http://codepen.io/cfjedimaster/pen/WxpPap. (I apologize for the formatting in the code - I was cutting and pasting rather quickly.)

I brought it up in the Slack chat and Mike Hartington came to the rescue rather quickly. Turns out the fix was… applying a class. Seriously. Even though the header has a class by default, if you don’t explicitly specify one, then the back button won’t show up. Literally - the fix is just this:


<ion-nav-bar class="bar-royal">
        <ion-nav-back-button>Back</ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

You can see this working in a CodePen Mike made for me: http://codepen.io/mhartington/pen/YWZBdK.

Obviously I think this is - well - bunk (grin) - so I’ll filed a bug report for it here: Back button will not show up if you do not specify a class for the nav bar.

And in case you’re curious - here is the “Before” picture of this mission-critical Enterprise demo:

And here is the “After” picture:

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.

Want to read more like this?