bug: ionic view-title is truncated.

[lucifertran]

Type: bug

Platform: android 4.2 webview

Hi,

My issue is:
I have a tab -> click on one item and it navigate to the detail page with a back button. (the navigation is done by routeprovider which pass an item ID).
The first time click to go to detail page. all data is loaded from breeze service.
However, if we go back & click on the same item, it simply get data from cache, which just take fraction of second. This is when the title issue arise:

At first time: i use ion-view view-title = {{}}
==> the title could not be display.

then i change to use:
ion-nav-title
{{}}
/ion-nav-title
==> title displayed on the second time, but the word is truncated like "View Ti..."

I tried to use $ionicNavBarDelegate.title(title); how ever it did not work, still being truncated.
I even try to add delay 1 second to the add title method, but still no clue how to fix it.

Anyone who go through the same problem?
Please help me to look into this

Thanks a lot.

[jjaybrown]

.header .title has a css property text-overflow: ellipsis; which will be truncating the text in the ion-nav-title directive. This is on purpose to prevent wrapping with long navigation titles. You can override the style in your own stylesheets.

[lucifertran]

thanks delta98.

modifying the style is not quite right. The title only wrapped when opening data the second time (without getting data from server).
If i force the form to load data on the second time, the title display perfectly like the first time.
Therefore, should have any work around solution for this?

[wkrueger]

Hello,
After some headache I've been able to reproduce it. In my case, the issue happens when the view title is changed dynamically. Say, the title begins empty or short, then is dynamically changed to a long title.

I see some issues on the portions below. There may be many ways of fixing it though.

//$ionHeaderBar controller

self.updatePositions = function(titleEle, updateTitleLeft, updateTitleRight, buttonsLeft, buttonsRight, updateCss, showPreviousTitle) {

//...


    ionic.requestAnimationFrame(function() {
      if (titleEle && titleEle.offsetWidth + 10 < titleEle.scrollWidth) {
        var minRight = buttonsRight + 5;
        var testRight = $element[0].offsetWidth - titleLeft - self.titleTextWidth() - 20;
        updateTitleRight = testRight < minRight ? minRight : testRight;
        if (updateTitleRight !== titleRight) {
          titleEle.style.right = updateTitleRight + 'px';
          titleRight = updateTitleRight;

//...

self.titleTextWidth = function() {
    if (!titleTextWidth) {
      var bounds = ionic.DomUtil.getTextBounds(getEle(TITLE));
      titleTextWidth = Math.min(bounds && bounds.width || 30);
    }
    return titleTextWidth;
};

In var testRight = $element[0].offsetWidth - titleLeft - self.titleTextWidth() - 20;, self.titleTextWidth() always returns 30 (or your initial title size) since it is "memoized" on the first execution.

This leads to testRight to be really big and to override minRight previously calculated from measuring the elements. Even if I call .align() again the title continues truncated.

My current ugly workaround was to remove if(!titleTextWidth) and to manually call angular.element(<header-bar>).data().$ionHeaderBarController.align() every time something on the title bar changes.

[lucifertran]

Thanks Will,
I've tried the workaround solution you mentioned, but still it does not work out. The title still generate differently on the next time.

[wkrueger]

Notice that there are always 2 ion header bars, one of which is always hidden (used for the transition). You need to run align in visible header bar (or in both).

At first it took me a bit to notice that, since I was trying document.querySelector, which only returns the first one.

So, this is my ugly code to realign the bars (plus memoization removal)

            setTimeout(() => {
                var headerBarEls = document.querySelectorAll("ion-header-bar");
                for ( var it = 0 ; it < headerBarEls.length ; it++ ) {
                    var ctrl = angular.element(headerBarEls[it]).data().$ionHeaderBarController;
                    ctrl.align();
                }
            },500);

[jgw96]

Hello! Are you all still experiencing this issue?

[wkrueger]

I'm yet to upgrade the project to a newer version of ionic to check it... Project currently on "stand-by".

[jgw96]

@wkrueger No Problem!

[jgw96]

Thanks for opening this issue! As this issue is a duplicate of #4661 (comment) i will be closing this issue but please feel free to move the conversation over there! Thanks again!