Horizontally align title on Navbar on Android

Ionic Framework ionic-v3
1

Hi all!

Lately i’ve been struggling to fix a small problem with the title in my navbar. Basically, the title in my navar are slightly misplaced on the right and not centered, this happens only on Android.

Also this happens only when a sidemenu button is present, otherwise the title is centered correctly.

Here’s the code:

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle left >
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title text-center>{{ titolo }}</ion-title>
    </ion-navbar>
</ion-header>

Here’s a screenshot of the problem:
Capture

2

Have you used Chrome’s dev tools to inspect the DOM and CSS to see what is introducing this?

You might have some custom CSS in your design that is being applied to the title.

3

The main reason is that i have the toggleMenu button on the left side of the navbar. I thought Ionic fixed this automatically when using the “text-center” property in the view. (iOS does indeed).

test2

Before trying to fix the problem with weird workarounds i’d like to know what’s the proper way to deal with this or if this is simply a bug.

4

How does it look when you preview all three supported Mobile platforms side by side:

ionic serve --lab

For example:

image
image.jpg1235×744 301 KB

See: https://github.com/Robinyo/big-top/blob/master/src/pages/events/events.html

5

It looks okay on ios but slightly offset to the right on android

Capture
Capture.JPG1593×799 119 KB

6

Try it without the text-center attribute.

7

I already tried all kind of similar solutions before opening this thread. Here’s a screenshot without the text-center attribute…

Capture
Capture1233×770 116 KB

the title isn’t centered anymore.

8

My point being what’s is the default behaviour on each platform?

  • on iOS the title is centred
  • on Android the title is not centred (its left-ish aligned)
  • on Windows the title is not centred (its left-ish aligned)

47
471153×136 32.5 KB

9 
<ion-header>
    <ion-navbar>
        <button ion-button menuToggle left >
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title text-center>{{ titolo }}</ion-title>
    </ion-navbar>
</ion-header>

OK, I see what you mean.

The ion-title text is being centred within the it’s parent, the navbar.

However, the centring doesn’t take into account the side menu.

10

Exactly. Is there an easy fix to have an always-properly centered title on android?

11

See:

1 Like