bug: wrong width of title in <ion-header-bar>

[loicknuchel]

Type: bug

Platform: all

I just found a bug on <ion-header-bar> migrating from the beta13 to beta14 :(

The width of title is calculated from the number of characters in buttons but it's hardly wrong when it's an angular expression...
See this codepen for practical exemple : http://codepen.io/anon/pen/OPbKxy

The workaround I found is to set angular expression via ng-bind instead of {{ }}

[drewrygh]

Confirmed. Interesting find, thanks for bringing it to our attention.

[javiercr]

We're having the same issue when using translated titles with angular-translate. Is there any workaround for it?

[jwgmeligmeyling]

Can confirm.

[loicknuchel]

Hi @javiercr, I proposed a workaround in my first post : using ng-bind instead of {{}}

[javiercr]

@loicknuchel ops! Sorry didn't see that before, I'll give it a try. Thanks!

[jwgmeligmeyling]

I've seen this issue with translate="key" as well.

[javiercr]

I've replaced:

 <h1 class="title">{{ 'my_translation_key' | translate}}</h1>

with

<h1 class="title" ng-bind="'my_translation_key' | translate"></h1>

But I have the same problem, in other words, the ng-bind workaround doesn't work for me :/

[javiercr]

Ops, I just noticed that the ng-bind workaround should be applied to the button, not to the title. It's now working for me like this:

<h1 class="title" ng-bind="'translated_title_key' | translate"></h1>
<button class="button button-clear" ng-bind="'translated_button_key' | translate"></button>

[jtomaszewski]

For me, following workaround seems to fix it:

app.controller "YourCtrl", ($scope, $timeout, $ionicNavBarDelegate) ->
  $scope.$on '$ionicView.afterEnter', ->
    # force recalculation of navbar title width
    $timeout ->
      $ionicNavBarDelegate.align("left") # or center/right depending what u use

[Fayozjon]

Jacek

http://izmirpirlanta.com/etoro-front

24.03.2015, 14:51, "Jacek Tomaszewski" notifications@github.com:For me, following workaround seems to fix it:

app.controller "YourCtrl", ($scope, $timeout, $ionicNavBarDelegate) ->
$scope.$on '$ionicView.afterEnter', ->
# force recalculation of navbar title width
$timeout ->
$ionicNavBarDelegate.align("left") # or center/right depending what u use

—Reply to this email directly or .

[mhartington]

So yeah, there's not much we can do were. How angular's internals work, the variable name will actually render for a split second, causing the misalignment. Using ngBind will resolve this issue.

Closing this as it is not an issue with ionic, but angular-core.