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

ionic-framework ionic4
Sireini picture Sireini · Feb 8, 2019 · Viewed 8.9k times · Source

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

Answer

Varun Sukheja picture Varun Sukheja · Feb 9, 2019

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

Related questions

NavController doesn't work in Ionic 4

I'm injecting NavController in my constructor as I want to push a page. But, below code doesn't work in Ionic 4. It was totally okay in Ionic 3. Constructor constructor(public menuCtrl: MenuController, public navCtrl: NavController) { this.menuCtrl.enable(true); } Method goToSecondPage() { …

Read More
How to set background color IONIC 4

I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have: <ion-content class="fondologin"> ... </ion-content> …

Read More
how to check app running in foreground or background in ionic/cordova/phonegap

Is there any way to check whether the app is running in foreground or background in ionic/cordova/phonegap, I need to use it on android and ios, thanks a lot

Read More