Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70612

Nav-back-button is always hidden

$
0
0

@DutchKev wrote:

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??

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70612

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>