Nav-bar back-button on right side

ionic-v1
1

Hi,

have a look at my pen

If you click on the menu button and choose Dummy Page you get the back-button on the left side of the menu button.

I’d like to use this back button but I would like to change the position if it appears. Is there any way to move this back button:

  1. just to the right side of the menu button - next to it like now it is on the left side
  2. to move it to the right side of the bar not just right next to the menu icon

Thanks,
Martin

2

I don’t think it’s possible. The backbutton is hardcoded into the header bar here : https://github.com/driftyco/ionic/blob/41b4f169aad719323aa436e83128e760fb0e374c/release/js/ionic-angular.js#L2925

It comes before the left buttons and title. So, there is no configuration option to move it. You could modify this code, but every release would ruin it. I’m not sure if there is someway to extend the navBar to customize it.

'<header class="bar bar-header nav-bar{{navBarClass()}}">' +
      '<ion-nav-back-button ng-if="(backType || backLabel || backIcon)" ' +
        'type="backType" label="backLabel" icon="backIcon" class="hide" ' +
        'ng-class="{\'hide\': !backButtonEnabled}">' +
      '</ion-nav-back-button>' +
      '<div class="buttons left-buttons"> ' +
        '<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" ' +
          'class="button no-animation {{button.type}}" ng-bind-html="button.content">' +
        '</button>' +
      '</div>' +

      '<h1 ng-bind-html="title" class="title"></h1>' +

      '<div class="buttons right-buttons"> ' +
        '<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" '+
          'class="button no-animation {{button.type}}" ng-bind-html="button.content">' +
        '</button>' +
      '</div>' +
    '</header>'
3

I’m facing the same problem.
I moved the menu button to the right, is not the best solution but better than having two buttons so near to each other.

4

This is actually now possible since the beta. See this example :

The key is to put the ion-nav-back-button inside the ion-nav-buttons and AFTER your other buttons.

<ion-nav-bar class="bar-positive">
	<ion-nav-buttons side="left">
		<button class="button button-icon button-clear ion-navicon"
                    ng-click="toggleLeft()">
                </button>

		<ion-nav-back-button class="button-icon ion-arrow-left-c">
                </ion-nav-back-button>
	</ion-nav-buttons>
</ion-nav-bar>
5

Actually, this my answer above didn’t answer the real question. I was answering how to put the backbutton to the right of existing left buttons.

That was always my problem with the back button as well. I didn’t like how it transitioned in and out depending on state. It caused the other buttons to shift. In addition, if a menu was open on a page with a back button, then the menu icon was not visible because the back button bumped it out.

Here is a sample of getting the back button on the right side. It works. However, it does cause some problems when the menu is open.

1 Like
6

I have the same problem but I don’t want to have the menu button and the back button at the same time.

I have an App with a side menu. I select Page1 in the side menu. Then I click a button on Page1 and Page2 comes in. Now I want a back button (and no menu button) on Page2 to go back to Page1. When I came back to Page1 the menu button should be there to open the menu.

Is there a solution for this? I searched but didn’t find something.

1 Like
7

I’m facing the same problem and I can’t put the nav back undert nav buttons