Adding a button to the navbar in place of the back button

Ionic Framework ionic-v3
1

On a specific page I need a “+” icon on the left corner of the navbar generally where the back button appears when there is a previous page in the nav stack. I added an icon on the left edge with this code:

<ion-header>
  <ion-navbar>
    <ion-buttons>
      <button ion-button icon-only>
        <ion-icon name="ios-add"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>channel-list</ion-title>

    <ion-buttons end>
      <button ion-button menuToggle icon-only>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

The icon “+” appears, but exactly at the same place back button would appear, it is more to left as compared to the menu button on the right it has a good space from its edge.

See this screenshot,

image
image.png1048×644 46.9 KB

The “+” button is on inside the toolbar-content but menu is out of it. I have both the ion-buttons element inside of ion-navbar still the button on the left somehow is pushed inside of toolbar-content container

How do I make sure that a button on the left is position in the DOM exactly like the button on the right so the padding / margin and any spacing is consistent.

2

ion-buttons start doesn’t do it?

3

No, instead it pushes the button that’s supposed to be on the left to right next to the menu button.

4

Are you sure? Maybe your sass is odd? That doesn’t happen to me when I use start and end on the same navbar.

5

I put them both under the title, by the way, not that it should make a difference.

<ion-navbar>
    <ion-title>text</ion-title>
    <ion-buttons start>buttons here</ion-buttons>
    <ion-buttons end>more buttons here</ion-buttons>
</ion-navbar>
6

Running it in iOS platform works as expected, the buttons stays on the start with the start attribute, doesn’t work on MD.

The only modification I made was centering the text for the title in MD, but even after removing that specific style the button doesn’t stay on the left with start

7

Ok, inspecting the HTML I found this

.bar-buttons-md {
    /* -webkit-box-ordinal-group: 5; */
    -ms-flex-order: 4;
    /* order: 4; */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

This is something Ionic adds, removing the flex-order properties pulls the start buttons to the left. Any idea what SCSS variables I need to work on to change the order of buttons?

8

I’ve never used it myself, but you might want to play with $toolbar-order-md. I’d be interested to know what happens.

1 Like
9

Yes! That’s it,

Default order for toolbars’ buttons and content was


$toolbar-order-md	(
  back-button: 0,
  menu-toggle-start: 1,
  buttons-left: 2,
  content: 3,
  buttons-start: 4,
  buttons-end: 5,
  buttons-right: 6,
  menu-toggle-end: 7,
)

I needed the iOS default since it works as expected on iOS, so copied the value of $toolbar-order-ios and put it on $toolbar-order-md and it now works!

The issue of non-consistent widths of the bar buttons I found that menuToggle and back-buttons has CSS properties for that, for which there isn’t any variables as far as I researched so I am now

.add-button.bar-button-md {
	    margin: 0 6px;
	    min-width: 44px;
	    box-shadow: none;
	}
	.add-button.bar-button-ios {
		margin: 0 6px;
	}

(of course added the add-button class to the button on the left)

This works very well, I just needed to use a custom button on this specific page so I think using a specific style for just one button is fine.

Thank you for your help! Appreciate it :smiley:

1 Like