Flex-layout: Column Layout Breaks in IE11

[julianobrasil]

I opened a similar issue earlier this year about this. It was closed as it was a question, but it wasn't: I really think it's a bug, or, at least, an unforseen behavior in IE11. A column layout is working very diferent in IE11 and in Chrome. In fact it seems it is broken in IE11, as you can see in the two images bellow.

In IE11 the item in a fxLayout="column" container aparently collapses if you do both of this simultaneously:

• don't specify a height for the container;
• use fxFlex attribute in the contained items without a fixed height: it's not possible to leave it empy - just fxFlex - or set a percentage value - for example fxFlex="40%" or fxFlex="40".

I think, in this case, in IE11, the behavior should be the same as thefxFlex="nogrow" option, as it is in other browsers.

plunker: https://plnkr.co/edit/zGMk1PaG5lCGsx2YAp79?p=preview

Chrome:

IE11:

[adamdport]

Possibly related to #310 ?

[julianobrasil]

@adamdport , I don't think so. There's no display:inline applied:

[Splaktar]

See https://github.com/angular/flex-layout/issues/201#issuecomment-310517875. In many cases using fxLayout="column" you are required to set a fixed height for cross browser support.

I often work around this by using fxLayout="row" fxLayoutWrap combined with proper use of fxFlex="100" or appropriate fractions of 100.

[julianobrasil]

@Splaktar , thank you. Right now I'm using fxFlex="noshrink" as a workaround (supposing this is a bug: dispite de fact it received a P4: minor bug label, it's possible to see it as an improvement, since it's broken because of the different browsers approach to the same situation).

[alberk8]

This is still not fixed in the latest version.

[MNorgren]

Also running into this issue with IE. Frustrating that I can't use fxLayout="column". The fxLayout="row" fxLayoutWrap worked in combination to fxFlex="100", but I'd really perfer to use fxLayout appropriately :-)

[CaerusKaru]

Update Plunkr: https://plnkr.co/edit/zGMk1PaG5lCGsx2YAp79

[CaerusKaru]

Will be fixed by #669

[julianobrasil]

Thanks for updating the plunk, @CaerusKaru! I put it in the former comment on this issue.

Good to know it'll be fixed.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}