fxHide breaks style of non-"display: box" elements

[netmikey]

As part of a responsive UI, there are times when we want to hide some elements of our UI (not whole parts, just a bunch of elements e.g. an item's label) on small screens.

As an example, I'd expect the following to work so that on non-xs screens, it displays the label inline next to the icon, and on xs screens only the icon remains:

<div>
    <img src="icon.png">
    <span fxHide.xs>Label</span>
</div>

The show/hide functionality now works as of v2.0.0-beta.4, but it looks like it toggles only between display: none and display: block, ignoring the actual display mode the element was in before fxHide got applied.

I think fxHide should take into account the element's actual display mode and not interfere with it.

[ThomasBurleson]

Fixed in PR #143

[netmikey]

It looks like this still happens (or maybe happens again?) in Firefox 53.0.3 with v2.0.0-beta.8:

When I add fxHide.xs to an element that has display: flex; applied in the css file, on Firefox it injects style="display: block;" in the dom, overriding the css. On Chrome, it doesn't inject anything.

[ThomasBurleson]

@netmikey -

• please provide a demo reproducing your issue
• please do not cc people in your comments.

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