Ionic-framework: Fix the title on iOS

[mhartington]

_From @brandyscarney on December 28, 2015 23:37_

Need to figure out a way to fix the title on iOS. What if to fix the title on iOS (it always needs to be centered), we added the start/end buttons with the same width all of the time so even if they didn't have content they would still take up the same space, then we can add flex properties to the toolbar-content and the title won't need the padding or absolute positioning. I'm going to look into more ways to do this.

_Copied from original issue: driftyco/ionic2#820_

[mhartington]

_From @mlynch on December 29, 2015 1:37_

I don't think absolutely positioning and doing the centering with JS is a bad approach. It's likely the same one that is being done natively, since there isn't really a natural way to express the way iOS title bar centering works through layout containers AFAICT

[mhartington]

_From @adamdbradley on December 29, 2015 3:39_

Yes it'll have to use JS to center the content by adding padding to either the left or right side. This is already what v1 does, and v2 will have to do. The challenge is that the css is applied to all the inner buttons, which may or may not be accurate when you do a Dom read (it'll probably report a width of zero for a frame). Once you do finally get accurate widths of the back button, menu button, and all start/end buttons, you then need to apply the css update to the title. All of this is absolutely possible, but to do all these Dom reads and writes during a transition causes some ugly jank and you see the title adjust as it sides in. So all of this needs to happen before the transition, which still has the same issues of coordinating reads and writes while the view itself is being written, then waiting for the css to apply before kicking off the transition, all without jank. So as it stands it first defaults to full width with some best guess for padding that works in most cases. But as you see it doesn't work for all cases. So solving this will take some time like v1's did, but it's very important it's tested on iOS devices, and the Dom reads and writes are coordinated with the view creation and animation starting. Additionally, because we're manually adding styles to the title, they'll have to be cleared out since the Dom elements may or may not be reused by ng2's view pool.

[imjohnbo]

Hi Ionic team. Any progress on this? I want to left align my title on iOS.

[FdezRomero]

I also need to align the title in iOS, but my use case is a bit different. I only want to left align it for the main view for branding (we use the ion-title to show the app logo with a custom font).

I tried to override the CSS but I always ended up screwing the titles in the other views as well (even if I prefixed the rule with the auto-generated page class name, the other inherited for some reason).

Thanks guys and keep rocking! ⚡

[raydelto]

Any update on this? I need to center a title on Android.

[dgroh]

@raydelto you can do it with scss which I don't think is a bad idea, but I think Ionic team can tell it better.

For exemple, for centering the title on iOS, add the following snippet to your app.ios.scss:

ion-navbar {
    .toolbar-title {
        margin-top: 18px; // Margin top from the StatusBar
        margin-right: 22px; // Maybe you don't need this, depending how your layout looks like
    }

    // Here is how you can center your title
    &.toolbar {
        padding-left: 6px;
        padding-top: 25px;
        padding-bottom: 10px;
    }
}

This fits well for us. I don't think it's the most beautiful way for centralizing something, but we decided not to make a big deal out of it for now as there are a lot of other issues with higher prio.

[michael-brade]

I think there is a really easy CSS fix for this problem. I would not do it with JS because that gets ugly rather soon.

Just add the following to the CSS:

.toolbar-content {
  position: absolute;  // take a flexbox item out of the flow
  width: 100%;         // take all the space, including that of the buttons on the left and right side
  z-index: -1;         // go under the buttons
}

.toolbar-title {
  text-align: center;  // now center the title
}

[gfviegas]

+1 for the option to center the title on Android.

I know material design is left-aligned, but sometimes you just want to make your app look the same in both platforms, making buttons on left side of android with the title on left make it hard to press the button and it looks bad.

[calendee]

@gfviegas & @raydelto Here is how I centered titles using Material Design/Android. The suggestion above by @michael-brade sort of worked. However, on iOS it threw the title way out of position. It looked fine on Android and browser though.

.title-centered .toolbar-content {
  order: 4;
  // Make sure the toolbar buttons are above the title or they can't be tapped!
  z-index: -1;
}

.title-centered ion-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 50px 1px;
  align-items: center;
  width: 100%;
  height: 100%;
}

.title-centered .toolbar-title {
  text-align: center;
  padding: 0;
}

The title-centered is used like this:

<ion-header class="title-centered">
  <ion-navbar>
    <ion-title>My P&L</ion-title>
  </ion-navbar>
</ion-header>

If you don't have ANY other header bars/toolbars in the app, you can skip adding the title-centered class. If you do have others, you'll need the extra class or those other toolbars will get messed up.

[biesbjerg]

Somehow overlapping of buttons/title does not happen in md mode, only in ios mode?

[biesbjerg]

Hi!

Where was this fixed?

[mhartington]

it's been improved since this was opened, but we'll revisit this down the road.

[biesbjerg]

Wouldn't it make sense to keep this (or https://github.com/driftyco/ionic/issues/9534) open, so it doesn't slip through the cracks then?

Using 2.0.0 final there is no difference to when saw back at one of the RCs.

Here is a repo to reproduce the issue (which was also provided in my ticket that was closed as a duplicate of this) updated to 2.0.0 final: https://github.com/biesbjerg/6228-ionic-keyboard-issues

On a bit more sour note: I understand that you want to close as many tickets as possible, but sometimes it seems a little premature, without respect for the time people put in to make a proper bug report with details and code how to reproduce.

That being said, congrats on releasing 2.0.0 final 🥇 🎉 🎈

[0x1ad2]

I wrote a fix for Ionic 2.0.x

Add the following style to your .scss file (I placed it in app.scss)

//  Centering title
// --------------------------------------------------
// a fix for centering the title on all the platforms

ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
}

After that add the following markup to your page

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons left>
      <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      Your title or image
    </ion-title>

    <ion-buttons right>
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>

[jgw96]

Hello everyone! I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to ionic-team/ionic-feature-requests#237

[modvd]

The link in the last comment brings me to a 404 error. Is this issue still being handled ? I want to use all the available space in the toolbar for the title on iOS but it gets truncated.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.