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

Question

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:

Varun Sukheja · Accepted Answer · 2019-02-09T12:17:01.627

48

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

edited Feb 09 '19 at 12:17

answered Feb 09 '19 at 11:39

Varun Sukheja

6,170
5
51
93

Thats because you are using mode='ios' this is only happening on android. – Sireini Feb 09 '19 at 11:42
@Sireini added some explanation to my answer, have a look. – Varun Sukheja Feb 09 '19 at 12:04
Yes but it also uses the ios icons when you use mode="ios"? – Sireini Feb 09 '19 at 12:05
@Sireini please have a look at the screenshots now, you can see different icons for ios and android. – Varun Sukheja Feb 09 '19 at 12:17
but title in android is cutting off now – Kapil Raghuwanshi May 15 '19 at 02:33
1

`mode="ios"` worked flawlessly. I've been banging my head since two days :/ – coderpc Dec 13 '19 at 03:57
Awesome! This is what I was looking for! Thanks! – Mr. DMX Jul 10 '20 at 04:44

samheihey · Answer 2 · 2019-11-25T06:34:41.000

3

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>

edited Nov 25 '19 at 06:34

answered Nov 08 '19 at 05:48

samheihey

169
1
3
13

1

What if there is back button? – Salman Ullah Khan Jul 29 '20 at 11:47

score 2 · Answer 3 · answered Aug 19 '20 at 19:03

2

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.

answered Aug 19 '20 at 19:03

Meraiah

75
5

Can you add explanation/reference to how this solves the problem in a better way than the accepted answer? – Chetan Bansal Aug 20 '20 at 08:32
**This is an addition to the accepted answer. You can add mode="ios" to each page you want to style individuality but this could involve a lot of repeated code depending on how large of a project you have. If you add this to the main HTML tag in the index.html you only have enter this code once and it will be applied to the entire project and save you from having to add this to each page. – Meraiah Aug 20 '20 at 13:26
5

This will impact all the components in the entire app.. and not just the ion-toolbar.. everything will take up 'ios' look and feel.. – Chetan Bansal Aug 20 '20 at 17:46

selcuk-sahin · Answer 4 · 2023-02-20T18:29:40.067

2

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

edited Feb 20 '23 at 18:29

answered Apr 27 '22 at 07:44

selcuk-sahin

327
2
10

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

4 Answers4