Flex-layout: fxLayoutAlign="center center" bug?

[ArmandoPerdomo]

Bug Report

What is the expected behavior?

Expects max-width 33%

What is the current behavior?

i have the current code

<div fxLayout="row">
<!-- some code ... -->
<ng-container*ngIf="someExp">
<div fxFlex="33%" fxFlex.lt-md="100%" fxLayoutAlign="center center" fxLayoutAlign.lt-md="start">

when the exp throws true, then de div flexs in a 100% when I declare it in 33% in all screen sizes

i remove fxLayoutAlign="center center" then works great, my fix was declare a css class with max-width: 33% and apliying ngClass.gt-md="w-33" class

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 9 and flex-layout 9

Is there anything else we should know?

I upgrade the angular core version from 8 to 9, in 8 that works fine, but in 9 occurs the behavior

[rannysan]

I had the same problem here, but when I removed *ngIf directive it worked fine, If you put the *ngIf in a div tag instead ng-container it will work as well.

Actually, I realized if the *ngIf is in the same tag that contains fxLayoutAlign it won't work.

Anyone else knows if there is any workaround for this issue?

[nileshverma89]

We have the same issue, previously it was working, and once we upgraded to angular 9, flex-layout 9
we got the same issue. @rannysan solution work but we have lots of div and it's not feasible to remove *ngIf from all of them.

[CaerusKaru]

Can anyone provide a StackBlitz demo of this issue as a minimal reproduction?

[chakrachi]

i have the same issue here if i upgrade to angular 9 and latest nightly builds for flex layout, previously my ngif logic flex was working. not anymore

[CaerusKaru]

This should be fixed in the latest nightly builds. Can anyone confirm this?

[CaerusKaru]

I'm going to close this for now; if it's still an issue after the next release, we can reopen this.

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