[Nav Header] Misplaced back button at the left: issue or my fault?!

ionic-v1
1

Markup:

<ion-side-menus>
    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="navigation-bar">
            <ion-nav-buttons side="left">
                <ion-nav-back-button class="button-clear">
                    <i class="icon ion-ios7-arrow-back"></i>
                </ion-nav-back-button>
            </ion-nav-buttons>

            <ion-nav-buttons side="right">
                <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent" class="home">

        </ion-nav-view>
    </ion-pane>
<ion-side-menus>

Rendered:

<ion-nav-bar class="navigation-bar bar bar-header nav-bar nav-title-slide-ios7 disable-user-behavior">
	<ion-nav-buttons side="left" style="display: none;"></ion-nav-buttons>
	<ion-nav-buttons side="right" style="display: none;"></ion-nav-buttons>
	<div class="buttons left-buttons">
		<span class="">
			<ion-nav-back-button class="button-clear button back-button">
				<i class="icon ion-ios7-arrow-back"></i>
			</ion-nav-back-button>
		</span>
	</div>
	<h1 class="title ng-binding" ng-bind-html="title" style="left: 52px; right: 52px;">Perfil</h1>
	<div class="buttons right-buttons">
		<span class="">
			<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
		</span>
	</div>
</ion-nav-bar>

When rendered, the button is misplaced, and I have to add the following css:

.navigation-bar .buttons.left-buttons {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
}

Am I doing something wrong?

  • Edited to fix the rendered markup
2

So a few things. You don’t need to wrap ion-nav-back-button in a ion-nav-buttons

It should be like this.

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

Also, ion-nav-buttons are meant to be child elements of ion-views, not ion-nav-bar. Please look of the docs.

http://ionicframework.com/docs/api/directive/ionNavBackButton/
http://ionicframework.com/docs/api/directive/ionNavButtons/

3

ion-nav-buttons side=“left”>

should be

ion-nav-buttons side=“right”

4

@Matangub: Well, I used it cause I wanted the back button is on the left, the “burger” is on the right…

@mhartington: Well, it makes a LOT of sense :smile:

It’ll try the fixes asap

5

Ah alright, so for something like that, you would remove the ion-nav-back-button and make your own custom back button

6

So the back button is hard coded at the right position?

7

Yeah, it’s the only real way to get it to work the way you want