Sidemenu template, custom back button and custom buttons in header not working

ionic-v1
1

Hi all,
I’m new to ionic, and the framework looks very good! However I’m cracking my head already two days on a problem. I’m on ionic beta 14.
What I want to achieve (I started on the sidemenu template) is to have a custom back button (ion-close icon). I managed to achieve this with some workarounds:

.config(function($ionicConfigProvider) { $ionicConfigProvider.backButton.text('').icon('ion-chevron-left').previousTitleText(false);})

I can have this with a title, no issues, but when I want to have two buttons to the right of the title (with events which work, usually they are covered by the other header-bar), things become tricky.

So the design I want is:

x (back button) Title < > (for navigating left and right)

When I put the buttons there like in the following codepen, it seems the back button creates it’s own header-bar and I create one myself. Sometimes the back button header bar covers the navigation icons, so the design looks OK, but I’m not able to click the navigate buttons. I made it work in the browser by giving a css class to the header-bar of the back button with a certain width small enough not to cover the navigation icons, but this doesn’t work on mobile (it seems there the title is part of the first header-bar).

Codepen: http://codepen.io/roelmartens/pen/ZYKJdK
As you can see, the title ‘test’ is not shown.

Thanks for the help!

2

can someone help on this?
Seems that ion-nav-bar is creating a header-bar itself, so I’m unable to create a customized back button + buttons in the title (or I don’t know how to do it)

3

What about this for the navigation buttons?

<ion-view>
    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear"><i class="ion-close"></i>
      </button>
    </ion-nav-buttons>
    <ion-nav-title class="bar-positive">
        <h1 class="title">test</h1>
    </ion-nav-title>
    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear" ng-click="onSwipeRight()"><i class="ion-chevron-left"></i>
        </button>
        <button class="button button-icon button-clear" ng-click="onSwipeLeft()()"><i class="ion-chevron-right"></i>
        </button>
    </ion-nav-buttons>
    <ion-content class="padding">
        ...
    </ion-content>
</ion-view>

For the customized back button you would probably want to remove the ion-nav-back-button from the ion-nav-bar and then add your own.

1 Like
4

the best answer i have found

1 Like