Nav-back-button is always hidden

ionic-v1
1

For some reason, the ‘ion-nav-back-button’ is always hidden… And I can’t figure out why??
It works correct when i do it manually with a ion-header…

I have the following index.html:

<body ng-app='starter'>
  <ion-nav-bar class="bar-stable" align-title="left" no-tap-scroll="true">
    <ion-nav-back-button class="button-clear">
       <i class="icon ion-arrow-left-c"></i>
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view name="main"></ion-nav-view>
</body>

And the following statesController:

$stateProvider
  .state('home', {
    url: '/',
    abstract: true,
    views: {
      main: {
        templateUrl: 'template/home.html',
        controller: 'homePageController'
      }
    }
  })
  .state('messageList', {
    cache: false,
    url: '/messageList',
    views: {
      main: {
        templateUrl: 'template/messageList.html',
        controller: 'messageListController'
      }
    }
  });

And the messageList has this template:

<ion-view class="messageListWrapper" view-title="{{navTitle}}" hide-back-button="false">
  <!--
  <ion-nav-buttons side="primary">
    <button class="button" ng-click="doSomething()">
      I'm a button on the primary of the navbar!
    </button>
  </ion-nav-buttons>
  -->

  <ion-content id="messageListContainer">
    <div ng-repeat="message in messages" class=" clearfix">
      <div class="messageBubble chat-bubble {{message.position}}">
        <span>{{message.message}}</span>
      </div>
    </div>
  </ion-content>

  <ion-footer-bar align-title="left" class="bar-assertive messageListFooter">
    <div class="messageInputWrapper">
      <i href="" class="icon ion-happy-outline"></i>
      <input type="text" placeholder="Send message..." id="sendMessageInput"/>
    </div>
  </ion-footer-bar>
</ion-view>

But for some reason, when I go the MessageList page, the go-back button is never shown… It always has the class 'hide’
Like this:

<ion-nav-bar class="bar-stable nav-bar-container nav-bar-tabs-top" align-title="left" no-tap-scroll="true" nav-bar-transition="ios" nav-bar-direction="exit" nav-swipe="">
  <ion-nav-back-button class="hide"></ion-nav-back-button>
  <div class="nav-bar-block" nav-bar="active">
    <ion-header-bar class="bar-stable bar bar-header has-tabs-top" align-title="left" no-tap-scroll="true">
      <button class="button back-button hide buttons button-clear header-item" ng-click="$ionicGoBack()" style="transition-duration: 0ms;">
        <i class="ion-arrow-left-c"></i>
        <span class="back-text" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"><span
          class="default-title hide">Back</span><span class="previous-title">Messages</span></span></button>
      <div class="title title-left header-item" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
        <img class="title-image" src="img/user_male.png">
        <h1 class="title">Kewin</h1></div>
    </ion-header-bar>
  </div>
</ion-nav-bar>

As you can see, the back button always has the class ‘hide’…

Any tips??

2 Likes
2

same issue ! doing nothing different ! for me whenever i visit a page from sidemenu its always adding hide class to back button ! did you get the solution?

3

@Sumeet were you able to solve this?

4

I dropped Ionic… Its a nice framework… But is seems to ‘trap’ you in 1 particular app design… So i just went all ‘Vanilla’ with Cordova, Backbone and Marionette :slight_smile: It needed some tweaks to register the routeChanges (#) to Backbone… But nothing new.

5

yes @shyamal890 its because of menu-close attribute !

instead of menu-close use menu-toggle="left" on the item in the menu. then the page you navigating to will show the back button

@DutchKev

Yes we too dropped ionic for our other projects. but not current one since it has come a long way.
ionic is good but not without crosswalk. which takes atleast 25 MB. Client’s annoy alot.

6

@Sumeet123 But I didn’t even press the item with menu-close attr.

7

in my case that was the issue ! on what state you cant see the back button ? is the state first child in nav stack ?

try this too ,
<ion-nav-back-button></ion-nav-back-button>

8

@Sumeet123 I think your reply got truncated

9

check now :stuck_out_tongue: actually i forgot put it in code block

10

I am facing the same issue, what do you mean by forgot to put it in code block?