fxLayout overrides and destroys existing display properties on screen width changes

[adamdport]

Bug Report

What is the expected behavior?

fxLayout shouldn't override display: none, or should provide a way to coexist with other directives/controllers

What is the current behavior?

fxLayout sets display:flex every time the screen changes past a breakpoint regardless of what was previously set.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-flex-layout-seed-cevrf5

What is the use-case or motivation for changing an existing behavior?

Directives are often used to hide an element. The current implementation of fxLayout makes that impossible

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

"@angular/core": "7.2.5",
"@angular/flex-layout": "7.0.0-beta.23"
Chrome

Is there anything else we should know?

This wasn't an issue until recently

[CaerusKaru]

Can you try with beta 24?

[adamdport]

No difference on beta 24

[CaerusKaru]

Ok I see the issue now. That's very frustrating. We'll try and get a fix in as soon as we can.

[jothipandiyanjp]

Is there any workaround to fix this issue temporarily?

[CaerusKaru]

I've thought about this quite a bit, and here's where I landed. The library as it's intended to be used means "this library clobbers all styles in the name of simplicity". That's why we use inline styles to begin with; we want users' intentions to override anything else in the markup. I understand your gripe here: you have a use case you believe is common and you think the library should adapt. In a way, you're right. But unfortunately, we can't have everything all the time.

What I have done, is introduce a new opt-in feature that does exactly what you're asking for. The caveat is that it is very hands-off. You need to now manage the display tag yourself, i.e. reset it back to the the right setting when you "un-hide". I hope this is satisfactory for your use case, because this was about the most I was willing to do here. Multi-variable style detection is an enormous undertaking, and for this library to track every style change across all elements that directives sit on, while interesting, is not covered in the current implementation. Perhaps in the new RFC #1185 this can be achieved, and in fact to some degrees that's what it was engineered for, but not in the existing library.

[CaerusKaru]

The PR to close this out is #1385, and should land in the next release.

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