Flex-layout: fxLayout=column and Safari

[rkajbaf]

Is there any plan to fix/change this behavior as part of flex-layout? The details are outlined in the issue below:

https://github.com/angular/material/issues/5441

As pointed out in that case:

"The solution is to add flex: 1 0 auto !important; to the parent layout elements that are not correctly being filled to their children's heights. The !important may not be necessary, up to you."

This works. Shouldn't this be part of the code base instead of a hack in the css?

[m0nzderr]

+1

[ThomasBurleson]

Sometimes browser-specific workarounds are a necessary evil. We will investigate this solution.

[intellix]

Related :D https://github.com/angular/flex-layout/issues/103

[jeffbcross]

I'd like to be able disable flex layout completely for some elements when the width is extra small. But right now, even if I use gt-xs breakpoints, flex CSS properties are being added to the elements.

<div fxLayoutAlign.gt-xs="center" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="25px">
  <div fxFlex.gt-xs="500px" class="victor"></div>
</div>

The layout element has display: flex; flex-direction: row; and the "victor" element has flex: 1 1 0 0.00000001px; when the width is xs. I expected that using only gt-xs, and no defaults, would mean that the flex properties would only be applied when the screen was greater than xs.

[ThomasBurleson]

@jeffbcross - please open a new issue with ^. This is a valid point and I will discuss the options on your new issue. Thx

[jeffbcross]

@ThomasBurleson done! #296

[AlanCrevon]

Hi folks.

Any update about this issue ?

It's a major problem for my project as any <div fxFlexFill fxLayout="column"> will break in safari OS X and iOS (works on chrome).

I tried the flex: 1 0 auto !important; workaround : never got it to work as expected no matter how hard i tried. Could anyone give a bit more explanation ?

Cheers.
alan

[Blackburn29]

Having this issue as well.

[ThomasBurleson]

NOTE: When using column flex-direction, you may need to specify a min-height or height (fixed pixel value or 100vh) value.

[michaeI]

As @rkajbaf solution didn't work for me I found this way to solve the issue:

div[fxLayout="column"]>div[fxFlex]{
flex: 1 0 auto !important;
}

[najibla]

@michaeI this works like charm!

[ThomasBurleson]

Here is a working Plunkr demo that shows proper layout on Safari and Chrome:

Notice the use of fxFlexFill on the div.content to fill the available space in its parent container

Closing as not an issue.

[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._}