fxHide doesn't work on page load

[srcn]

Bug Report

What is the expected behavior?

fxHide must hide the content on page load.

What is the current behavior?

It doesn't work as expected on page load.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-gqvksp

<div fxHide fxShow.gt-sm>

  <div fxLayout="row" fxLayoutAlign="start center" fxFlex="0 1 auto">

      This content doesn't get hidden on small screen size!

  </div>
  
</div>

There is no fxLayout on the parent element, and because of that, fxFlex puts display: flex to the parent item in order to work correctly and that overrides the display: none from fxHide.

If I put fxLayout="row" to the parent element, fxHide works as expected. It also works correctly when resizing the window.

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

It's a bug.

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

flex-layout 6.0.0-beta.17 & beta.18, Angular 6.x, Chrome (MacOS), Firefox (MacOS) & Safari (MacOS)

Is there anything else we should know?

Related issues: #812 , #814

[KevinToala]

I have the same error

[CaerusKaru]

This is a very unfortunate issue, not just because of the UX, but because it's a tricky fix. We have a case of competing directives, each with their own stake on the CSS display property: fxFlex and fxLayout each want display: flex, and fxShow and fxHide each want display: none or to set the display back to what it should be. There will need to be a design on the best way to regulate this, which I'll start working on. I apologize for the inconvenience in the meantime.

[CaerusKaru]

I think I've got this patched in #881. Please build to make sure. If I don't hear back either way in the next week, I'll push it to the nightly builds (since it's not that far ahead of NPM, it shouldn't impact too many if it breaks something).

[srcn]

@CaerusKaru I've built and tested the #881 and it fixed all the issues I have with the previous builds. I also didn't see anything broken while I'm testing it (we have a pretty big template that uses the Flex Layout so it's a nice visual testing bed for us)

Thank you for your hard work!

[adamdport]

@srcn how did you go about building/testing? The package name is flex-layout-srcs which is throwing me off. Do I need to clone it, change it back and install that or is there a simpler way?

[srcn]

@adamdport I simply downloaded the branch that has the #881 in it, built it using npm run lib:build:aot and manually replaced the @angular/flex-layout from the node_modules directory with the dist/releases/flex-layout (or something like that, I'm not sure what's the exact path)

[gbertoncelli]

I have the same issue, are you sure that the problem is fixed?

[tylerthrash]

I'm on version "@angular/flex-layout": "8.0.0-beta.26" and I'm also getting this issue. The issue should be reopened. @CaerusKaru can you look at this?

[aapi-rp]

I'm on version "@angular/flex-layout": "8.0.0-beta.26" and I'm also getting this issue. The issue should be reopened. @CaerusKaru can you look at this?

I am also getting the same issue, version 7.0.0-beta.24

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