Material: tabs: not re-rendering on width change by script

[gilad905]

Actual Behavior:

• What is the issue? *
  On changing the width of the md-tabs element via JS:
• md-tabs with md-stretch-tabs will not render the correct width & location for the ink bar (which highlights currently selected tab).
• pagination, if needed, will not appear / disappear as expected (when tab label move into and out of overflowing the md-tabs width).
  When resizing the browser window, the ink bar and pagination will re-render correctly, which means the rendering only responds to a window resize event.
• What is the expected behavior?
  The width & location of the ink bar will change to match those of currently selected tab. The pagination will appear when the tab labels overflow their container, and disappear when the overflow stops.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  http://codepen.io/anon/pen/MJwyzV
• Details:

Angular Versions: *

• Angular Version:
  1.5.5
• Angular Material Version:
  1.1.1
  Additional Information:
• Browser Type: *
  Chrome
• Browser Version: *
  55.0.2883.87 m
• OS: *
  Windows 7
• Stack Traces:

[gilad905]

BTW, a workaround fix for this issue is to programatically trigger the window.onresize event by adding the line
window.dispatchEvent(new Event('resize'));
every time a resize is done via the script.

[Splaktar]

I can reproduce this in 1.1.21 in this updated CodePen. However, I think that this is something that the component does not support (and may cause some performance concerns) at this time rather than it being a defect. We would certainly accept a PR that added this enhancement to md-tabs as long as we could verify that it doesn't cause any significant performance degradation.