Material: tabs issue with 1.1.0

[emps]

md-pagination-wrapper width is 1px less from what it should be generated, and this makes last tab to disappear from the bar

when i set 1px more it works ok, this issue happen with all may tabs after updating to 1.1.0 from rc5

[gdereese]

I am also seeing this issue. It seems that refreshing the browser sometimes fixes the problem, but it's intermittent. I was also observing this behavior before 1.1.0 rc5.

[EladBezalel]

Please provide a codepen so we can investigate more

[emps]

hii thanks for replay, im very busy i will try make this tomorrow, but untill then what i see is, md-pagination-wrapper width is 1 px less then what it should be, sometimes it calculated correct and last tab is visible.., if i change it manually 1px more my tab comes back

[gmanriqueUy]

Same as #5439, right?

[emps]

yes same, welli just did some directive to fix it, hope there will come fix for this

[topherfangio]

If someone can provide a Codepen, I will definitely look into this.

[zgambino]

Here's a codepen based on the markup I'm using that also has the same issue:

@topherfangio http://codepen.io/zgambino/pen/PGNrad

[emps]

@zgambino thanks for the code, @EladBezalel bro check it out, tab 3 may be appear if u resize the screen or play with the css md-pagination-wrapper width +1px

[topherfangio]

@zgambino Thanks for the demo! I'll definitely look into this.

[gustavogsimas]

Is this being resolved? Is there a workaround while it's not resolved? Thanks +1

[p-mcgowan]

md-pagination-wrapper {
  width:auto !important;
}

is a hacky temporary workaround until this is resolved.

[emps]

@p-mcgowan that isnt a good fix, i tried that long time ago it make problems too... already forgot what it was//

[p-mcgowan]

I found this was a problem with setting

md-tabs md-tabs-wrapper md-tabs-canvas md-tab-item:not([disabled]) {
    text-transform: uppercase;
}

as well, and the only fixes I have found are manually calculating the width of the buttons and min-width-ing the container to fit. The problem is at the controller level, so it is harder to fix with simple css however my previous comment fixes a few simple use-cases but you are correct in that it is a terrible fix and introduces problems of it's own. If you are not using dynamic or translated buttons, you can manually min-width !important the container, but it's still sloppy.

[reppners]

md-pagination-wrapper {
width:auto !important;
}
is a hacky temporary workaround until this is resolved.

Won't work when tab items overflow the pagination-wrapper e.g. most likely on small screens.

Is there any other proper workaround? Having to fix this in an production app ASAP.

[clshortfuse]

partially improved with #9451 (no longer hides tab) but the width is still incorrect. It's either a rounding error, or dialog animation is causing the width to be calculated while in transition

ping @ErinCoughlan

[clshortfuse]

http://codepen.io/shortfuse/pen/ENWbjL on master with workaround for dialog

The issue relates to the md-tab's size being changed and the component not properly handling it. As I said in the previous comment, the dialog animation is causing the width to be calculated while in transition. Regardless, it should update itself.