Flex-layout: bug - fxHide and fxSHow aren't work with screen size

Created on 25 Jan 2017 · 10Comments · Source: angular/flex-layout

fxShow and fxHide work, however, fxShow.gt-xs or any screen size for that matter doesn't work.

Here are the versions I'm working with.
"@angular/material": "^2.0.0-beta.1"
"@angular/flex-layout": "^2.0.0-beta.3"

Source

tydanielson

👍1

Most helpful comment

We are working to allow the following::

<div fxHide
     fxShow.gt-sm>
  This content to be shown ONLY when gt-sm
</div>

^ is not yet working as expected.

ThomasBurleson on 28 Jan 2017

👍4 🎉1

All 10 comments

These fixes are now in #master and will be available on npm with Beta.4 (coming soon).

See https://github.com/angular/flex-layout/pull/121 for details.

ThomasBurleson on 25 Jan 2017

🎉1

Ok thanks, I'll check the closed issues and master before creating an issue next time.

tydanielson on 25 Jan 2017

@tydanielson 👍 Thanks for getting involved with flex-layout!

ThomasBurleson on 25 Jan 2017

@ThomasBurleson: I pulled down master and was able to get all the fxHide parts working, but when I tried to do <div fxShow.gt-sm></div> it didn't work. I took a look at the source and didn't see anything obvious, but it's going to take me some time to figure out what's going on. I do have a workaround, however, using <div fxHide.xs fxHide.sm></div> works like a champ.

tydanielson on 26 Jan 2017

@tydanielson - what did not work with <div fxShow.gt-sm></div> ?

What was the expected rendering?
Did you style it to not show by default?

Note that fxShow does not hide when-not-active/when-false. fxShow will only set the display to "flex" when true and resets original display mode when false.

You prolly want this:

<div style="display:none"
     fxShow.gt-sm>
  This content to be shown ONLY when gt-sm
</div>

ThomasBurleson on 26 Jan 2017

Ah that makes sense... I didn't style it to not show by default. I guess my assumption would be that I wouldn't need to hide it first. I would expect it to have the display set depending on what screen size I initially pull open. If I open it in a mobile page, it would be first hidden by my setting it as display:none and then shown by the fxShow component which seems odd when fxShow could handle that for me. This is just my opinion of course.