md-tabs inside md-dialog: width issue

[lmignot]

I've created a codepen: https://codepen.io/anon/pen/XmNqOz

If you have a custom dialog with md-tabs inside and md-tabs are set to md-dynamic-height and you have a container inside the dialog with a width or min-width set, neither Chrome nor Firefox calculate the width of the tab labels correctly and truncates the label

Browsers: Chrome 45.0.2454.85, Firefox 40.0.3, IE 11.0.9600

IE11 works fine... below is a screenshot of how it renders in Chrome

[lmignot]

I've narrowed it down to getMaxTabWidth in tabsController (line 540)
Seems like when the tabs controller is initialising the element hasn't been rendered yet so clientWidth is 0. Hence max-width on md-tab-item is set to 0

[stoperan]

Any workaround?

[websirnik]

Similar #4834 & #4744

[hannahhoward]

maybe set a $scope.$watch on $element.clientWidth and call getMaxTabWidth when it changes? Seems like an expensive solution. Or there's the always famous use $timeout to delay all that checking (not recommending this one :) in the meantime since if I understand maxTabWidth is a public property of the controller I'm going to put a directive underneath that does my $scope.$watch solution. will gist it if anyone needs. wouldn't the proper thing for the md-dialog to somehow let the tab controller to recheck width once it's visible?

[osuritz]

It was working fine for us (at least on Chrome) in 0.10... not sure what has changed yet.

[hannahhoward]

0.11 is the breaking point I think.

also, if anyone needs a workaround while the team fixes it, this little directive seemed to do the trick for me:
https://gist.github.com/hannahhoward/35b87c2b5d0154a7edd4

[hannahhoward]

I don't recommend that as a permaneant solution -- checking the clientWidth constantly will probably (not sure) trigger browser repaints and slow things down.

[osuritz]

Thanks for the temporary fix, @hannahhoward!

[blakemanzo]

+1

[lmignot]

apologies for the delay, my own temporary solution was a lot less elegant, i was passing a function to the onComplete option for $mdDialog which would check the clientWidth and apply it.

thanks @hannahhoward, yours looks like a better solution

[maelfrize]

+1

[lorthirk]

+1

0.11.0 is fine, 0.11.1 is not

[gligoran]

+1, same as @lorthirk

[colintemple]

+1

I encountered it when moving from 0.10 to 0.11.1. In my case the tabs are not inside a dialog, but inside an md-content. When my app initially loads, this problem appears. If I navigate to another page and then back to the home screen (where these tabs load inside the md-content element), they look fine.

[ThomasBurleson]

To expedite resolution, please always test with the latest versions:

• Angular Material HEAD (currently v0.11.2)
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.js
• Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.css
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.js
• RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.css
• AngularJS Latest Release versions:
  • Angular 1.3.19 (or greater)
  • Angular 1.4.6 (or greater).

Can you confirm the issue still exists with the above versions ? I will reopen if needed.