Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

fxHide/fxShow incosistency with SSR and client rendered app #1163

Closed
vmasek opened this issue Dec 19, 2019 · 2 comments · Fixed by #1243
Closed

fxHide/fxShow incosistency with SSR and client rendered app #1163

vmasek opened this issue Dec 19, 2019 · 2 comments · Fixed by #1243

Comments

@vmasek
Copy link

vmasek commented Dec 19, 2019

Bug Report

What is the expected behavior?

fxHide.x should behave the same when rendered by SSR and client

What is the current behavior?

fxHide.x doesn't set the display: block in the CSS media query, it leaves it empty and items remain hidden.

What are the steps to reproduce?

Try this code rendered by SSR with JS off in a browser and rendered by the browser to see the problem.

    <div class="rounded-thingies" fxHide fxShow.gt-sm>
      <!-- DESKTOP -->
    </div>
    
    <div class="rounded-thingies" fxHide fxShow.lt-md>
      <!-- MOBILE & TABLET -->
    </div>

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

Angular: 8.2.14
FlexLayout: 8.0.0-beta.26
@amitas1991
Copy link

I am also facing same issue. Please let me know if any possible solution for this.

@vmasek vmasek mentioned this issue Jan 2, 2020
Closed
CaerusKaru added a commit that referenced this issue May 8, 2020
@CaerusKaru
fix(show-hide): use initial value as fallback isntead of parent
e4bb7ef 
When SSR creates media screen styles, it sets the default `display`
CSS property to `parent.display`. However, if the parent has its
`display` property unset, it results in an empty display that breaks
the correct functionality as the next closest match is made.

This is fixed by setting `display` to `initial` as default instead
of an empty value.

Credit to @vmasek

Fixes #1163
@CaerusKaru CaerusKaru mentioned this issue May 8, 2020
Merged
CaerusKaru added a commit that referenced this issue May 8, 2020
@CaerusKaru
fix(show-hide): use initial value as fallback instead of parent
4012b17 
When SSR creates media screen styles, it sets the default `display`
CSS property to `parent.display`. However, if the parent has its
`display` property unset, it results in an empty display that breaks
the correct functionality as the next closest match is made.

This is fixed by setting `display` to `initial` as default instead
of an empty value.

Credit to @vmasek

Fixes #1163
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 8, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@vmasek @amitas1991