Nav-bar button overlaps


Good Morning guys,

I have a question, I have the main bar created like this:

<ion-nav-bar ng-controller="AppCtrl">
            {{'back_button'| translate}}
        <ion-nav-title ng-click="mainRouter()">
          <div class="page-title">{{title}}</div>
          <div class="page-sub-title">{{date}}</div>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">

      <ion-nav-buttons side="right">
        <button ui-sref="app.settings" class="button icon ion-ios-information-outline"></button>

The cuestion is… when I go to another view that has for example another right button it overwrites it, its possible to maintain the two buttons?

  <ion-nav-buttons side="right" >
    <button class="button ion-plus" ui-sref=''> </button>


Can’t you do this in the other view?

  <ion-nav-buttons side="right">
    <button class="button ion-plus" ui-sref=''>

    <button ui-sref="app.settings" class="button icon ion-ios-information-outline">


no because the plus button is specific in that view and only appears there.


I think either I misunderstood you or you misunderstood me. By including those two buttons ONLY in the specific view as you wanted they won’t appear anywhere else. Alternatively, you can apply ng-hide/ng-show on a button if the user is in the specific view.


how do you say not no show in a specific view?


Are you using ui-router?

If yes, it is pretty simple. You can get the url of a view with $state.$ and then you can apply it in your template with attribute ng-hide="hideInView()" and define the function in your controller as

$sccope.hideInView = function() {
    if ($state.$ === "your.state") return true; else return false;


Thank you very much!


I actually have a typo there, should be $state.$! Updating it now sorry


I stay corrected. You can use either of those. Here’s a little discussion on that if you’re interested