feat(breakpoints): only apply flex properties if a breakpoint is activated

[jeffbcross]

(opening issue per @ThomasBurleson suggestion in #201)

My comment:

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.

For further context, the main motivation is for a responsive layout where I want rows to be columns (stacked) on mobile. Safari has requirement of parent column containers having a set height (not auto), or else elements start clobbering each other. I want the child elements to be display: block; height: auto;.

Thanks :)

[jeffbcross]

BTW happy to submit a PR if maintainers agree with the request and we can agree on a design, but I'm guessing this would require significant internal changes.

[ThomasBurleson]

@jeffbcross - When using the flex-layout API, if you use responsive directives WITHOUT default flex-layout directives, then those defaults are injected as needed.

So - in your scenario above - the following is what is actually happening:

<div fxLayout="row"
     fxLayoutAlign="start start"
     fxLayoutGap="0px"
     
     fxLayout.gt-xs="row" 
     fxLayoutAlign.gt-xs="center" 
     fxLayoutGap.gt-xs="25px">

  <div fxFlex
       fxFlex.gt-xs="500px" 
       class="victor"></div>

</div>

Now if you have CSS define for flex-direction:column then the default fxLayout will use that...
We presume defaults because those values are restored when a responsive breakpoint **de-activates".

Closing as non-issue.

[ThomasBurleson]

@jeffbcross - The current architecture assumption is that any responsive API usage also implies that the host element will have default (non-responsive) flexbox settings auto-applied .

Under what scenarios would you want the container box to NOT have default flexbox settings when you specified such for mobile?

<div class="box" fxLayout.gt-xs="row"></div>

[matheusdavidson]

@ThomasBurleson I think this should be considered, i mean, if you use fxFlex.gt-xs or fxLayout.gt-xsor any other property with a breakpoint, you expect flex layout to apply the properties only in those espcified breakpoints rather then injecting defaults in the dark.

Even more for those(like me) who use this API since material 1, when you would only get what you declared in your HTML.

[ThomasBurleson]

@matheusdavidson - Help me understand this one... if you use a fxFlex.<xxx> responsive layout, under what conditions would you not have/want a default fxFlex setting as fallback ?

[matheusdavidson]

For other people seeing this, the workaround for now, at least for fxFlex is to set fxFlex="none" as default

[matheusdavidson]

@ThomasBurleson, i think the best thing to do is not have a default at all. Apply the style only in the breakpoint specified. If one wants a default value, its easy, just use without any breakpoint(fxFlex).

For example, if i want to use fxFlexonly in xs, i would expect the styles being added only when i specify fxFlex.xs, when the breakpoint is outside of xs no style is inserted, right now the default style will break the layout specially in IOS, because its adding extra style that developers don't expect.

I think is much better this way:

1. Scenario where i want style only for xs and no default for any other breakpoint:

<div fxFlex.xs></div>
<div fxLayout.xs></div>

2. Scenario where i want specific style for xsand a default style for all other breakpoints:

<div fxFlex fxFlex.xs="none"></div>
<div fxLayout="row" fxLayout.xs="column"></div>

[matheusdavidson]

Chrome won't care much about this, the layout won't break, but look what happens in Safari/IOS with the extra styles i didn't expect(first image is the broken one, second is the fixed one with fxFlex="none"):

Wrong

Fixed with fxFlex="none"

[ThomasBurleson]

@matheusdavidson - if fxFlex is not defined [AND responsive fxFlex.<alias> are used], then defaulting to fxFlex="none" is a reasonable solution.

[angular-automatic-lock-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.}