Tile Card: Hide features when off

Hello everyone,
I recently had the idea to switch from my mushroom dashboard setup to native HA the best I could. There is one very important feature at Tile Cards that is missing: Hide controls when the entity is turned off.

I know you can do that using 2 cards and the visibility option, but it would be so much easier to just have a button that says
“Hide features (or controls) when entity is off”.
Also I want a option for something to happen if you hold down (long click) the card.

Did you ever get this functionality figured out?

2 Likes

… which will cause a masonry dashboard “jumping” due to changed cards’ height.

Are you sure about that?

Please be more accurate with credits.

My bad, this is what I get for posting after being awake for 24+ hours lol

Will re-post and correct. Not sure if these replies will disappear if I delete the original?

So you can technically do this with card-mod, but it’s a bit janky and a native solution would be significantly preferable.

Credit to LiQuid_cOOled over in this thread, if you don’t have any card-mod styling already, you can simply add:

card_mod:
  style:
    hui-card-features$:
      hui-card-feature$:
        hui-light-brightness-card-feature$: |
          ha-control-slider {
            display: {{ 'none' if is_state(config.entity, 'off') else 'block' }};
          }

But if you are using ha-card styling already, you can combine the 2 like this (using a dark transparent ha-card style as an example):

card_mod:
  style:
    .: |
      ha-card {
        background: rgba(0, 0, 0, 0.5);
        border: none;
        box-shadow: none;
        border-radius: 12px;
      }
    hui-card-features$:
      hui-card-feature$:
        hui-light-brightness-card-feature$: |
          ha-control-slider {
            display: {{ 'none' if is_state(config.entity, 'off') else 'block' }};
          }

The problem though is that the default card without the slider feature enabled takes up a single row, where it takes 2 rows if it’s enabled. With this card-mod styling though the card always takes up 2 rows even if the slider is hidden.

I spent a good while trying to figure out a way to get around this, but it seems like Home Assistant forces the tile card to be 2 rows tall the second the “features:” flag is added. If anyone can figure out a way around this, that would be great. Hopefully this will be fixed officially soon enough that that won’t be needed however. Seems like just a bit of oversight, can’t imagine most people want the slider to show up when the card is off

I’d note that if using this with the Sections dashboard you have yo control the card height too. That was highlighted by @Jaw818 at the end of the other thread.

card_mod:
  style:
    hui-card-features $:
      hui-card-feature $:
        hui-light-brightness-card-feature $: |
          ha-control-slider {
             display: {{ 'none' if is_state(config.entity, 'off') else 'block' }};
             }
    .: |
      ha-card {
         height: {{ '50%' if is_state(config.entity, 'off') else '100%' }}!important;
      }

I voted for the FR!

1 Like

You can achieve the look of this with two tile cards… but it is excessive. the one with features is visible when on, the one without is visible when off.

How is this not implemented yet?