align icons in ionic header

Question

I am trying to have a ion-header where one icon is on left and another on right. my code looks like below

<ion-header>
    <ion-navbar>
      <ion-buttons icon-start>
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>

      </ion-buttons>
      <ion-title text-center>about</ion-title>
      <ion-buttons  icon-end>
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
  </ion-header>

but what is hapenning is that i see it coming in 3 different rows.

Answer 1

ok, you need remove the first <ion-buttons> and leave only <button> and on the second tag of <ion-buttons> change icon-end to end.

and it should work!!

Answer 2

Welcome to StackOverflow!

Since Ionic applies the android/ios standards based on the current platform where the app is running, you need to understand the meaning of the following attributes: start, end, left and right.

About end/start/left/right

Using the start attribute in the ion-buttons doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform

So <ion-buttons start> would be on the left for ios and be the first button on the right for android.

And <ion-buttons end> would be on the right for ios and the last button on the right for android.

So with both start or end the button will be placed at the right on Android.

If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that. It's easier to see with a few examples, so please take a look at the following examples.

---

Example 1: Using start and end

<ion-header>
  <ion-navbar>
    <ion-buttons start> <!-- Here we use start -->
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons end> <!-- Here we use end -->
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

The result is:

iOS

Android

---

Example 2: Using left and right

<ion-header>
  <ion-navbar>
    <ion-buttons left> <!-- Here we use left -->
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons right> <!-- Here we use right -->
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

The result is:

iOS

Android