Tabs being eaten. Unknown.

[jaunkst]

Very strange behavior in tabs v1.0.0-rc4-master-9d52697

below does not work One of the tabs seems to not show/go behind other tabs or something.

openTabs = [{title: 'LEADS'}, {title: 'LEADS'}, {title: 'LEADS'}]

below works find.

openTabs = [{title: 'LEAD1'}, {title: 'LEAD2'}, {title: 'LEAD3'}]

When testing with various random tab titles sometimes one will get eaten up and not show up until one of the tabs are removed dynamically.

This also happens when hard-coded

md-tabs(style='width: 500px;')
  md-tab
    md-tab-label
      | Leads
  md-tab
    md-tab-label
      | Leads
  md-tab
    md-tab-label
      | Leads

[jaunkst]

I see that the md-pagination-wrapper can have the wrong width causing the tabs to wrap. md-pagination-wrapper

[jaunkst]

[jaunkst]

starting the width at 2 instead of 1 corrects the issue for me.

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

[gpopovic]

+1

[KReden]

Am seeing this as well. We got around it by doing adding a disabled tab at the end with a non-breaking whitespace ala:

<md-tab ng-disabled="true">
    <md-tab-label>
        &nbsp;
    </md-tab-label>
</md-tab>

This doesn't fix the problem, it just means that when the bug happens it will affect that tab instead of the tabs we care about.

[scottreisdorf]

This is still not fixed in v1.0.0-rc7, See my code Pen: http://codepen.io/scottreisdorf/pen/EPjXzN and related Issue I just made: https://github.com/angular/material/issues/6212