CODEWITHSUNDEEP
ionic-frameworkionic4
Sireini
Sireini

Reputation: 4262

Ionic 4 ion-title in toolbar is not centered on android

I am wondering if this a common problem. My ion-title is not centered in the toolbar on android.

I googled it but I couldn't find anything for ionic 4, what I did found was a pretty good solution in ionic 3.

here it is: https://stackoverflow.com/a/30021395/4983589

I am wondering if somebody know how to do this in ionic4?

Here an image how it looks on android:

enter image description here

Upvotes: 23

Views: 17676

Answers (4)

selcuk-sahin
selcuk-sahin

Reputation: 543

If you want to keep android mode, you can do the following in your global .scss file:

ion-title {
  &.md {
    width: 100%;
    position: absolute;
    left: 0;
    height: 0;
    text-align: center;
  }
}

This way on the iOS mode title is already centered, you will only be changing the title alignment on the android

Upvotes: 2

Meraiah
Meraiah

Reputation: 75

Adding mode="ios" does work. To simplify you can add mode="ios" to the main HTML tag in the index.html and this will be applied to the entire app so you don't have to add this to each individual HTML page.

Upvotes: 2

samheihey
samheihey

Reputation: 309

I have tested the followings on my android and the title is centered with other buttons such as back button, etc.

Not too sure if it works on iOS devices
Hopefully this helps:

<ion-toolbar>
    <ion-title style="width: 100%; position: absolute; left: 0; height: 0;">
        Title
    </ion-title>
</ion-toolbar>

Upvotes: 3

Varun Sukheja
Varun Sukheja

Reputation: 6526

Ionic v4 keeps toolbar title on left for android devices and on center for IOS devices.

To use a particular behavior you can use mode="md|ios". md is for android and ios for IOS devices.

Since you want to make the title on center, you can use mode="ios" which will make the toolbar title to be on center for both android and ios devices.

This is my header:

<ion-header>
    <ion-toolbar mode="ios">
        <ion-title>
            Add New Rest
        </ion-title>
        <ion-icon slot="end" name="analytics"></ion-icon>
        <ion-buttons slot="start">
            <ion-buttons slot="start">
                <ion-back-button defaultHref="home"></ion-back-button>
            </ion-buttons>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

Have a look at the screenshot below enter image description here enter image description here

Upvotes: 49

Related Questions