fxFlex directive adding styles to both parent and host element

[rosslavery]

When fxFlex is added to a child element whose parent does not contain fxLayout, the library is automatically adding inline styles to the parent element (as well as the host) that essentially convert the parent to a flex row.

While I understand the documentation states:

The fxFlex directive should be used on elements within a fxLayout container and identifies the resizing of that element within the flexbox container flow.

There are valid use-cases that require the use of fxFlex to be used while not inside an fxLayout container, and the expected result would be a simply application of flex: 1 1 auto or whatever the desired style is on the host element, while leaving the parent element alone.

One such example would be a routing component that needs to be a flex column. Currently, I have styles in my component stylesheet that set it to be a flex column on the :host. Then the child elements inside the component template use fxFlex to stretch to fill that container. Unfortunately flex-layout is currently converting those routed components to be a flex row with inline styles that clobber the component stylesheet.

The desired behaviour would therefore be to leave the parent component of the host untouched.

Originally posted here: angular/angular#15726

[ThomasBurleson]

@rosslavery - The flex css is injected onto the parent because you used fxFlex on the inner div. fxFlex attempts to resize the host element with respect to its parent flex container. So it adds flex css stylings to the parent (if needed) to insure that the parent container is a flex container.

Is this not a viable behaviour ?

[rosslavery]

I suppose it's viable, but since the host element in this case already has styles added via it's stylesheet, ideally flex-layout wouldn't clobber the stylesheet styles with it's own assumption about what the parent should be (row vs column).

How else could one define a routed component to be a flex column, since you can't access it's tag to add fxLayout="column" to it? Even with a @HostBinding to add a class or inline styles, I suspect that flex-layout would take precedence over those styles.

[rosslavery]

It can be fixed with flex-direction: column !important in the component :host stylesheet, it just seemed like an unusual/unexpected behaviour.

As a consumer of the library I was expecting the fxLayout* directives to handle container-related styling, and the fxFlex* directives to handle child-related styling.

[ThomasBurleson]

@rosslavery:

RE > As a consumer of the library I was expecting the fxLayout* directives to handle container-related styling, and the fxFlex* directives to handle child-related styling.

True. However, we also tried to add some smarts to tweak the parent if needed using _getFlowDirection ().

I wonder if line 98 should be:

if ( !value && addIfMissing ) {
   value = 'row';
   this._applyStyleToElements(buildLayoutCSS(value), [target]);
 }

RE > How else could one define a routed component to be a flex column, since you can't access it's tag to add fxLayout="column" to it?

This is a great question / consideration.

[rosslavery]

I mean, I'd appreciate a change like that, would be very helpful.

Thanks for taking the time to consider it!

[ThomasBurleson]

@rosslavery - together (community + flex-layout team), we make a great library!

[mcwebdev]

I have an open issue for this feature. Add flex attributes to host elements.
#76

[ThomasBurleson]

Refs #272

[rmathi]

When fxFlex is added to a child element whose parent does not contain fxLayout, the library is automatically adding inline styles to the parent element (as well as the host) that essentially convert the parent to a flex row.

While I understand the documentation states:

The fxFlex directive should be used on elements within a fxLayout container and identifies the resizing of that element within the flexbox container flow.

There are valid use-cases that require the use of fxFlex to be used while not inside an fxLayout container, and the expected result would be a simply application of flex: 1 1 auto or whatever the desired style is on the host element, while leaving the parent element alone.

One such example would be a routing component that needs to be a flex column. Currently, I have styles in my component stylesheet that set it to be a flex column on the :host. Then the child elements inside the component template use fxFlex to stretch to fill that container. Unfortunately flex-layout is currently converting those routed components to be a flex row with inline styles that clobber the component stylesheet.

The desired behaviour would therefore be to leave the parent component of the host untouched.

Originally posted here: angular/angular#15726

Hi.. My doubt/question is..Why its getting automatically applied when AOT compiler on not JIT ? @rosslavery @ThomasBurleson

[rmathi]

@rosslavery - The flex css is injected onto the parent because you used fxFlex on the inner div. fxFlex attempts to resize the host element with respect to its parent flex container. So it adds flex css stylings to the parent (if needed) to insure that the parent container is a flex container.

Is this not a viable behaviour ?

Hi.. My doubt/question is..Why its getting automatically applied when AOT compiler on not JIT ? @ThomasBurleson

[naveenrawat51]

Following worked for me in component:

:host {
flex-direction: column !important;
}

Thank you all :-)

[sterlp]

I am using "@angular/flex-layout": "^8.0.0-beta.26", and it is still bugged. @naveenrawat51 your workaround works fine -- I am not a CSS pro but just using it as a "client" the current behavior seems wrong to me.

e.g.: using this in the current version requires the fix metioned above ...
https://rawgit.com/start-javascript/sb-admin-material/master/dist/grid

I looked into the demo app by adding
FlexLayoutModule.withConfig({ addFlexToParent: false, }),

to the app.module.ts it is fine too.

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