Material: md-tabs last tab sometimes not visible

[scottreisdorf]

• Depending upon the Tab Title, md-tabs will not always render the last tab in the Array when used with ng-repeat.
• When it gets in this state it also is unable to scroll left, right when the tab window becomes small

See codepen here:
http://codepen.io/scottreisdorf/pen/EPjXzN

A Fix using the v1.0.0-rc7 code

Using v1.0.0-rc7 I was able to fix this by changing the updatePagingWidth method to add 1 more px.
See code below adding 1 more px at the end:

 width +=1;

Full Method:

      function updatePagingWidth() {
        var width = 1;
        angular.forEach(getElements().dummies, function (element) {
          width += Math.ceil(element.offsetWidth);
        });
        width +=1;
        angular.element(elements.paging).css('width', width + 'px');
      }

[mrdotb]

Hello,
Look like the problem is still here. I use dialog with tab. Every time I call the dialog, the last tab is not displayed.
I find two quickfix:
Add a dummy tab
Or fire this on the modalController to add 1px (ugly).

    setTimeout(() => {
      var el = document.querySelector('md-pagination-wrapper');
      var currW = el.style.width;
      el.style.width = parseInt(currW, 10) + 1 + 'px';
    }, 200);

I reproduce the issue on this codepen. I'm using the last version of chrome on linux.

[JackForbes]

I started having this problem after upgrading to v1.1.0 and two solutions worked for me:

1) Explicitly set a tab width, so that the wrapper doesn't render too small. Just add your myTabs class to the <md-tabs> element and then the following CSS:

.myTabs .md-tab {
  width: 150px;
}

2) Set the tabs to always stretch with md-stretch-tabs="always" although this obviously isn't an ideal solution for everyone. Also I have found that setting stretch to always does not paginate properly on mobile...

[JackForbes]

Also not sure how I just unassigned @robertmesserle ...

[ErisedMedia]

Seems to happen at random after upgrade to 1.1.0
So far only in firefox. Never in chrome.

[hexadecy]

AM 1.1.0
Dialog + dynamic tabs
Issue: cannot see and/or scroll to the last tab.
Because: The label is not a static text.

Just add   as a workaround.

<md-tab ng-repeat="item in list">
<md-tab-label>&nbsp;{{item.timestamp | date:shortDate}}</md-tab-label>

[jaczynski]

I have the same problem using latest 1.1.1. I am using tabs in custom dialogs, and the last tab is never displayed. The workaround using md-stretch-tabs="always" works for me but it is not ideal.

[hexadecy]

Or you can add <md-tab ng-hide="true"></md-tab>

[rupe120]

I'm seeing this problem in Chrome and Firefox but not IE 11 and Edge. My scenario uses just 2 static tabs and both the extra hidden tab and setting md-stretch-tabs="always" work but are ugly fixes.

<md-dialog id="forcastUpdateDialog" aria-label="Update Forcast">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <div class="md-toolbar-title">
                    <h2>Updating Forcast</h2>
                </div>
                <span flex></span>
                <div class="toolbar-icons">
                    <md-button class="md-icon-button" ng-disabled="notModified()" ng-click="save()">
                        <md-icon aria-label="Save forcast">save</md-icon>
                    </md-button>
                    <md-button class="md-icon-button" ng-click="close()">
                        <md-icon aria-label="Close dialog">close</md-icon>
                    </md-button>
                </div>
            </div>
        </md-toolbar>        
        <md-dialog-content>
            <md-tabs md-boarder-bottom>
                <md-tab label="Current">
                    <md-content class="md-padding">
                        <form>
                            1
                        </form>
                    </md-content>
                </md-tab>
                <md-tab label="History">
                    <md-content class="md-padding">
                        2
                    </md-content>
                </md-tab>
            </md-tabs>
        </md-dialog-content>
</md-dialog>

Please fix

[rupe120]

For anyone who isn't shy about using full jQuery here's a drop in patch

(function () {
    'use strict';

    // Patch for md-tab bug https://github.com/angular/material/issues/6212
    var initialWidth = {};
    $('body').on('DOMNodeInserted', 'md-pagination-wrapper', function (e) {
        var that = this;

        setTimeout(function() {
            // Don't increment the width if there's no width set
            if (that.style.width === "" || that.style.width == "0px")
                return;

            var currW = parseInt(that.style.width);

            // Don't process a element more than once (the $$hashkey value is added by Angular after all the DOM is created)
            if (initialWidth[that.$$hashkey] < currW)
                return;

            that.style.width = currW + 1 + 'px';

            initialWidth[that.$$hashkey] = currW;
        }, 200);
    });

})();

[smithscripts]

Removing the width:1px from this class works for me. This gets applied to the hidden tabs which the directive uses to calculate the width of the md-pagination-wrapper, which does not allow custom content width to be taken into consideration.

._md-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
text-transform: none;
/width: 1px;/
}

[LabN36]

@smithscripts you save my life after 2 hours of debugging