Android/Windows platform Nav/ToolBar Title Alignment issue

Ionic Framework ionic-v3
1

I am currently prototyping/developing in the browser. When I view the Android version of the app via

http://localhost:8100/?ionicplatform=android

the Title of my modals and pages is either too far left or right aligned (I am expecting/wanting it to be centered) and/or truncates if the Title is too long:

image
image

Is this a bug, quirk of developing in browser, or default behaviour for mobile Android? I wouldn’t have thought I’d have to manually apply css to fix the font size and alignment…

2

Could you provide a small demo of this and push it to github for testing? This sounds like css bug, but a demo could help rule that out.

3

@mhartington I don’t know how to push it to github for testing (relative newbie to all this) however the code used was:

<ion-toolbar dark>
  <ion-title>Example</ion-title>
  <ion-buttons end>
   <button (click)="closeModal()">
      <ion-icon name="close"></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>

and

<ion-navbar *navbar dark swipe-back-enabled="true">
  <ion-title>Terms of Use</ion-title>
</ion-navbar>

respectively, and then running

ionic serve -t android

should reproduce the issue in any ionic 2 project.

4

OK so I was accidentally using some CSS (left and right padding on the ion-title) inherited from another project which was causing the truncation problem.

Title is still left-aligned which may be default for Android/Windows Phone but I would prefer centered - unfortunately this is not as simple as using text-align:center as the ion-title div only begins after the back button icon.

image

Also, the title in Windows platform is capitalised:

image

Is this standard for Windows phone? I always thought capitalising words was the text equivalent of shouting. :slight_smile: Not a fan.

Anyway the capitalisation can be easily turned off by not using

text-transform:uppercase

EDIT: Added as an Issue:

5

@mhartington @Mobius77 i have the same problem too align-title=“center” is also not working in Ionic 2, my code is:-
<ion-navbar *navbar class="navbar_wrapper" hideBackButton align-title="center"> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>San Francisco</ion-title> <ion-buttons end> <button (click)="location()"> <ion-icon name="pin"></ion-icon> </button> </ion-buttons> </ion-navbar>