Ionic 2 / 3 / 4 : How to align button in the header to the right side of header

user_5710014 0
Viewed 46798

How can I align with the right side, the button is showing on the left of the header without compose icon.

Here is what I'm doing:

<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
    <i class="icon ion-compose"></i>
</button>
</ion-toolbar>
ionic2 ionic-framework angular html
8 Answers

ionic 4 ion-navbar is replaced by ion-back-button and in Ionic 4 back button be like 

<ion-header>
  <ion-toolbar>
       <ion-buttons slot="start">
  <ion-back-button></ion-back-button>
       </ion-buttons>
    <ion-title>
     Home
    </ion-title>
      <ion-button slot="secondary">
        <ion-icon name="search"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
user_97589860

It's work for me.

Ionic 4 - Header

enter image description here

<ion-header>
   <ion-toolbar color="primary">
      <ion-title class="titleHeader">User Detail</ion-title>
      <ion-buttons slot="end">
            <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
   </ion-toolbar>
</ion-header>

user_101819290

I solved my problem with this:

ion-buttons {
    order: 10
}

Try adding it to your stylesheet

Note: I used this in ionic2.

user_26630730

It can be done as follow:

 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-button slot="start">
        <ion-icon name="search"></ion-icon>
     </ion-button>
     <ion-title>
       utenze
     </ion-title>
     <ion-button slot="end">
        <ion-icon name="menu"></ion-icon>
     </ion-button>
   </ion-toolbar>
 </ion-header>
user_85849040
Related