Static Placement of Dashboard Elements

Configuration Frontend
1

Hi all!

I'm in the process of updating my HA Overview dashboard. I'm trying to streamline it by only showing controls when they are pertinent to me. One example is the exhaust fan in my bathroom: this turns on above X humidity and runs for a while. I don't ever want to control this manually, but I DO want to know when it's on as it can be loud and distracting. I catch myself asking "What's that noise?!", so having it pop up on my dashboard helps solve this issue and save control space.

This gets me to my problem: I DO NOT want these controls to jump around the dashboard! I've been using the badges in my header section for this, and it drives me crazy that the order changes all the time. I want something like my car's dash, where the "Check Engine" light is always in the same place. Sure I'm picky, but this also gives me added information as I'll learn that the little icon in the bottom right is always my dishwasher indicator, etc. I can't have that when my buttons and badges are hopping all over the place.

Is there a combination of grids/entity-filter/horizontal stacks/buttons/whatever that will preserve my spacing, even when the visibility conditions for the indicator are not met?

Thanks in advance!

2

I think you'll need card_mod or UIX for this. I think so, because the dashboard's visibility option translates to CSS display, which removes elements from the layout. However, CSS visibility property only hides them, preserving the space they occupy.

In short: UIX + visibility: visible/hidden.

3

Man, got the answer in 1. I thought UIX would be difficult, but the actual syntax for show/hide was pretty simple. Side bonus: setting the visibility to hidden ALSO deactivates the button, so I can't click on anything by accident.

For future posterity, this is a code snippet I used to get what I wanted:

type: grid
cards:
  - type: button
    entity: switch.bedroom_master_closet_light
    name: Closet
    show_name: true
    show_icon: true
    show_state: false
    icon: mdi:lightbulb
    icon_height: 20px
    grid_options:
      rows: null
      columns: 2
    tap_action:
      action: toggle
    hold_action:
      action: none
    uix:
      style: |
        :host {
          visibility:
            {% if is_state('binary_sensor.bedroom_master_closet_door', 'off')
                  and is_state('switch.bedroom_master_closet_light', 'on') %}
              visible
            {% else %}
              hidden
            {% endif %};
  - type: custom:button-card
    entity: light.laundry_light_switch
    name: Laundry
    template: compressed_button
    uix:
      style: |
        :host {
          visibility:
            {% if is_state('binary_sensor.laundry_room_door_open_sensor','on') %}
              visible
            {% else %}
              Visible
            {% endif %};
        }
  - type: button
    entity: switch.kitchen_overhead_light_switch_control