Md-Tab Content width issue within mdDialog

[maurerke]

Actual Behavior:

• What is the issue? * Md-Tab content within an mdDialog does not initially gets the full width. After interaction with an element, the content "jumps" to full width.
• What is the expected behavior? The content should have its expected width from the beginning.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://jsfiddle.net/aftq6sgo/ and http://codepen.io/DevVersion/pen/WxmKJL (provided by DevVersion)
• Details: Open the Dialog. You see how the green Div (with an input field) has the full width. However, the blue one (which is within die tab container), has some issue. As soon as you click in the input field, the width changes.
  I used a simple for the example. The issue exists with anything within the tab container.

Angular Versions: *

• Angular Version: 1.5.7
• Angular Material Version: 1.0.9

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 51
• OS: * Windows 8
• Stack Traces: -

See the issue in action:

[maurerke]

sorry to bother you, @devversion, but could you take a look at this and tell me if this is known and expected behavior, or if this is a bug? Thanks!

[devversion]

This is definitely a bug. But it seems to relate to the browser. I'm still trying to figure out what the issue is, but it seems to be pretty difficult.

In Chrome 51, the click makes the div use the full width.
In Chrome 52, you have to manually trigger a repaint of the DOM to use the full width.

[maurerke]

Thank you for looking into it. I couldn't find any responsible css or javascript either that could cause this behaviour, really weird. However, with Chrome 52 the issue isn't really noticeable for the user. So that's something. 👍

[devversion]

I continued playing with that issue and still came to no new findings.

Here is a better codepen, which allows us to test "static" vs "dynamic".

http://codepen.io/DevVersion/pen/WxmKJL

[clshortfuse]

Moving md-tab-content to use display:flex fixes this.

md-tab-content {
  display: flex;
}
md-tab-content > div {
  flex: 100%;
}

I'll try to figure out the best method to implement this and then go about testing any negative effects.