CODEWITHSUNDEEP
ionic2
Thripthi Haridas
Thripthi Haridas

Reputation: 363

ionic2: Header Title not aligning center

enter image description here

I'm trying to align menu toggle icon to left and title to center of the header. I'm using the below code:

<ion-header>
  <ion-toolbar color="primary">
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>
      Home
     </ion-title> 
 </ion-toolbar>

But the title doesn't appear in the centre. please help out. thanks in advance.

Upvotes: 7

Views: 8278

Answers (8)

sanooj
sanooj

Reputation: 1

you can use mode='ios' on the ion toolbar

using this code solved alignment issue on my android header

here is the corrected code

` <ion-toolbar mode='ios' color="primary">
 <button ion-button menuToggle left>
  <ion-icon name="menu"></ion-icon> 
 </button> 
 <ion-title>
  Home
 </ion-title> 
 </ion-toolbar>`

Upvotes: 0

Khurram
Khurram

Reputation: 695

You just need to add the text-center directive to your ion-title or ion-toolbar or add class="ion-text-center"

<ion-header>
  <ion-toolbar color="primary">
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title text-center>
      Home
     </ion-title> 
 </ion-toolbar>
</ion-header>

Upvotes: 3

Jatin Devani
Jatin Devani

Reputation: 194

you can use css to center text please try this html code

<ion-title text-center class="comman-title-text-right">Signup</ion-title>

add css 

.comman-title-text-right{
    margin-right: 60px;

}

Upvotes: 0

Saravanan Nandhan
Saravanan Nandhan

Reputation: 612

For android device you need to put this code

Using this code solved this issue for me.

page.html do this

<ion-header no-border-bottom>

  <ion-navbar color="primary" class="home-nav">
      <ion-title >Dashboard</ion-title>
      <button ion-button menuToggle  >
          <ion-icon name="menu"></ion-icon>
        </button>   
  </ion-navbar>
</ion-header>

app.scss file do this

ion-header button, .back-button {
  position: absolute !important;
  z-index: 5;
}


ion-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
}

Upvotes: 5

Franco Coronel
Franco Coronel

Reputation: 730

You should use left or right in ion-buttons because start and end doesnt work always 

    <ion-header>
          <ion-toolbar color="primary">
            <ion-buttons left><!-- here -->
             <button ion-button menuToggle left>
              <ion-icon name="menu"></ion-icon> 
             </button> 
             </ion-buttons>
             <ion-title>
              Home
             </ion-title> 
         </ion-toolbar>
</ion-header>

Upvotes: 0

LittleTiger
LittleTiger

Reputation: 332

The problem can easily be solved by taking out the button from the content flow: set it's position to absolute which leaves the title as only child in it's parent normal flow. It will take up the entire width and get properly centered.

Something like:

ion-navbar button {
    position: absolute !important;
}

Upvotes: 3

Mohan Gopi
Mohan Gopi

Reputation: 7724

For ios mobile the title will automatically aligned center all you have to do is for android 

    <ion-header>

      <ion-navbar color="primary">
         <button ion-button icon-only menuToggle>
          <ion-icon name="menu"></ion-icon> 
         </button>
         <ion-title>
          Home
         </ion-title> 
     </ion-navbar>
   </ion-header>

in your css do this

ion-title{
 text-align: center;
}

if the above Sass is not applied the try this

ion-title.title.title-md {
    text-align: center;
   }

Upvotes: 0

Suraj Rao
Suraj Rao

Reputation: 29614

You need to set the button within ion-buttons start.

Try:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons start><!-- here -->
     <button ion-button menuToggle left>
      <ion-icon name="menu"></ion-icon> 
     </button> 
     </ion-buttons>
     <ion-title>
      Home
     </ion-title> 
 </ion-toolbar>

Toolbar docs

Upvotes: 0

Related Questions