poll: what should be the default behavior for fxFlex?

[CaerusKaru]

This issue tracks the possibility of changing the default behavior for the fxFlex directive. Currently, the behavior is as follows:

• When the input is an integer, this defaults to a percentage value input for fxFlex
• When the input is any other singular value, it's interpreted as the intended flex-basis value and results in flex: 1 1 <input> with min-width and max-width applied (assuming row format)
• When the input is three values, it's interpreted as a direct translation to the CSS flex property, with min/max-width applied according to the algorithm specified here
• When the input is longer than three values, it is truncated to the first three values

I'll list some alternative options for fxFlex behavior below, please vote for your preferred option, or feel free to add your own. If you like the current behavior, please do not add comments, but simply vote for this comment.

[CaerusKaru]

Option 1)

The fxFlex directive should mimic as close as possible the CSS flex property, with the following syntax:

• When the input is an integer, this is interpreted as the CSS flex shorthand and is applied as such
• When the input is any other singular value, it's interpreted as the intended flex-basis value and results in flex: 0 1 <input> (the default CSS flex values for grow and shrink)
• When the input is three values, it's interpreted as a direct translation to the CSS flex property
• When the input is longer than three values, it is truncated to the first three values

[CaerusKaru]

Option 2)

The same as option 1, but min/max-width is applied as it is with the current default

[CaerusKaru]

Option 3)

The same as option 1, but the min-width/height and max-width/height can be specified at the end of the fxFlex declaration as follows:

fxFlex="grow shrink basis [min] [max]", where none means don't apply max/min
fxFlex="0 1 500px 200px 500px"

[CaerusKaru]

Option 4)

The same as the current default, but the min-width/height and max-width/height can be specified at the end of the fxFlex declaration as follows:

fxFlex="grow shrink basis [min] [max]", where none means don't apply max/min
fxFlex="0 1 500px 200px 500px"

[adamdport]

Option 5) The same as option 3 but the default min/max is none

[CaerusKaru]

Update: once beta.14 gets released, I'll close out the results of this poll and start working on the implementation. Then we'll take comments on the PR before it gets merged.

[CaerusKaru]

Talked about this offline with @ThomasBurleson and here's our consensus:

• Changing the default behavior of fxFlex constitutes a massive breaking change, one that would require tooling to get around (much like the material-prefix-adapter tool for when Material went from md to mat prefixes). We're not willing to invest in that at the moment, but we are willing to consider that as an adoption plan
• In the meantime, we are willing to add this new configuration as a token so that you can enable it in your apps as an opt-in. This will likely see a release either in beta.16 or beta.17
• A workaround for now is to simply declare the full flex instead of the shorthand, which is currently flex: 2 -> flex: 2 1 0%. Alternatively, you can use the fxGrow attribute
• We don't have a workaround for max/min-width settings other than to use !important on a class for the element, but this will be part of the new configuration token added in beta 16/17

Hope that helps, and as always feel free to post any comments/concerns below.

[gedclack]

Hi, so the beta.14 is out, after I tried it, my flex-layout seems to be a bit broken..
I have something like this and it's works in beta.13 but broken in beta.14 :

<div fxLayout="column" fxFill>
  <div> ...toolbar... </div>
  <div fxFlex style="overflow-y : auto"> 
    .. fill the remaining space, respecting the toolbar's height above .. 
    .. and also a long list of items here ..
  </div>
</div>

what breaks? the toolbar shrink caused by the long item list below it.

so with beta.14 I have to add fxFlex="none" to the Toolbar div to fix it.
is this by design ?

UPDATE 25 April 2018 : stackblitz link
https://stackblitz.com/edit/angular-flex-layout-beta14-bug

[CaerusKaru]

Can you encapsulate this in a StackBlitz demo on a separate issue? It might be a bug introduced by the flex basis changes made in beta.14

[gedclack]

Sure, will do it soon.. I thought this is by design.

[mtraynham]

I've also attempted an upgrade to beta.14 and it broke most of my app. The app itself is a full screen experience with custom scrolling, so often I'm using fxFlex to fill the remaining space of parent components, whether they be row or column layouts. This app is ported from Angular 1 material, where I was originally using layout-fill from the old library until I realized it was completely broken on Safari.

After this upgrade, I think most of my issues stem from display: flex; flex-direction: row no longer being implicitly applied to child components. I'm not entirely sure if it's related to 3cfafd1, but that might be my best guess.

I've also had somewhat of a hack in place that set's minWidth: 0 when fxFlex is applied within a row layout, using the following scss. I've never really liked it, but the Material 1 library used to apply it, and it worked.

*[fxlayout],
*[fxlayout='row'],
.layout-row,
*[style*='display: flex'][style*='flex-direction: row'] {
    > *[fxflex],
    > .flex,
    > ui-view,
    > *[style*='flex: 1 1 1e-09px'] {
        min-width: 0;
    }
}

I feel like this is about to be the 3rd time I've been burned by these layout changes. Can you please advise on what fxFlex/fxLayout should do in terms of a full screen app and filling vertical space to accommodate custom scrolling?

And how should components interact outside their own template and within their own template?

[CaerusKaru]

@mtraynham Flex styles are no longer implicitly applied from fxFlex to its parent. This was part of #670 and can be re-enabled by providing the ADD_FLEX_STYLES InjectionToken as follows:

import {ADD_FLEX_STYLES} from '@angular/flex-layout';

{provide: ADD_FLEX_STYLES, useValue: true}

My best guess at a fullscreen app filling vertical space would be something like this:

styles.css

html, body {
	height: 100%;
	width: 100%;
}

app.component.html

<div fxLayout="column" fxFill>
	<div fxFlex>
		<router-outlet></router-outlet>
	</div>
</div>