Documentation samples for Menu and Checkbox layout issues in IE11

[stevenmiles]

Layout issues with Checkbox examples

Layout issues with Menu examples

[Londovir]

Comparing how the Menu example looks under 0.10 MD under IE11 (when it looks basically fine) with the more recent one, it appears to be related to the fact that they used to use a layout-fill attribute on the container DIV which hosts the 3 different samples which are all overlapped. Now that attribute has been removed from the demo page markup, and under IE11 that causes the items to all collapse together because of the missing width: 100% which used to be granted by virtue of the layout-fill.

This appears to be an IE11 specific flex model issue, as Chrome/Firefox appear to have no problem with growing the DIV to fit the parent width without being specifically told to do so. Under IE11, if you toss either the width:100% style, or even a align-self:stretch style on the DIV, all works as planned.

As for the checkbox issue, looks like taking the flex attribute off the fieldset fixes the problem. Not sure why, must be another IE11 flex model issue. Interesting to note that the attribute isn't needed for Chrome, so much as I can tell. Anyway, it's the flex-basis value which causes the problem for IE11. If flex-basis is set to 0px (which it would be based upon the flex attribute), it collapses in IE11. If it is left as auto, it sizes correctly.

[ThomasBurleson]

@stevenmiles Do you see these same issues in IE using the latest in master (v0.11.0-rc2)?

[stevenmiles]

@ThomasBurleson Yes, still happens in v0.11.0-rc2. Both samples render incorrectly identical to the OP, so no change at all between versions.

Same Checkbox sample shown in OP is also still incorrect.