WTH why cant we use an empty/fake entity in Glance card

to organize our column rows:

  - type: glance
    columns: 4
    entities:
      - entity: binary_sensor.schimmel_alert
        name: Schimmel
      - entity: binary_sensor.co2_monitor_carbon_dioxide_detected_location_provided
        name: Co2 status
      - entity: binary_sensor.humidity_living_low
        name: Hum
      - entity: sensor.schimmel_sensor
        name: Mold
      - entity: sensor.co2_living
        name: Co2
      - entity: sensor.temperatuur_living
        name: Temp
      - entity: sensor.luchtvochtigheid_living
        name: Vocht

shows like:

but I am looking to create it like:

would be very nice to be able to do:

    entities:
      - entity: binary_sensor.schimmel_alert
        name: Schimmel
      - entity: binary_sensor.co2_monitor_carbon_dioxide_detected_location_provided
        name: Co2 status
      - entity: binary_sensor.humidity_living_low
        name: Hum
      - type: empty
      - entity: sensor.schimmel_sensor
        name: Mold
      - entity: sensor.co2_living
        name: Co2
      - entity: sensor.temperatuur_living
        name: Temp
      - entity: sensor.luchtvochtigheid_living
        name: Vocht

Currently home assistantā€™s answer is two glance cards.

If youā€™re okay with installing HACS, you can also look into something called a ā€œstack-in-cardā€ GitHub: GitHub - custom-cards/stack-in-card: šŸ›  group multiple cards into one card without the borders

That will allow you to create a card that can have many cards inside of it.

I do agree though that as a power user we should be able to add a spacer through the UI.

sure, I meant in core HA.
there a different ways using various (combinations) of custom cards, but tbh, it should be a core functionality.

Ill do this for now inside a core entities card:

  - type: custom:hui-element
    card_type: glance
    columns: 4
    card_mod: &mod
      style: |
        ha-card {
          box-shadow: none;
          margin: -8px -16px;
        }
    entities:
      - entity: binary_sensor.schimmel_alert
        name: Schimmel
      - entity: binary_sensor.co2_monitor_carbon_dioxide_detected_location_provided
        name: Co2 status
      - entity: binary_sensor.humidity_living_low
        name: Hum

  - type: custom:hui-element
    card_type: glance
    columns: 4
    card_mod: *mod
    entities:
      - entity: sensor.schimmel_sensor
        name: Mold
      - entity: sensor.co2_living
        name: Co2
      - entity: sensor.temperatuur_living
        name: Temp
      - entity: sensor.luchtvochtigheid_living
        name: Vocht

and spread the margins some more.
Nice illustration how silly we have to maneuver currently

I was able to avoid this issue by inserting a generic entity like ā€˜sunā€™ into the spot where I wanted a blank, and then setting the icon to ā€˜noneā€™ and the tap_action to ā€˜noneā€™. This gives me a blank cell in the grid.

2 Likes

right, nice and simple.

still a hack though :wink: albeit with core tools.

thanks for the suggestion!

exactly what do you use there? I mean how to get rid of the state?

          - entity: sun.sun
            name: ' '
            icon: ' '

maybe you arenā€™t using core glance card?

add available option on state (sorry missed that before)

show_state: false

anyways I just found we can do this too

          - entity: sun.sun
# this works ok-ish, but still makes the cursor respond which is silly really because all possible actions are negated. Might actually be considered a frontend bug
            name: ' '
            icon: ' '
            show_state: false
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
# using the card_mod styling is much better, takes away all, and doesnt trigger the cursor handle
            card_mod:
              style: |
                state-badge {
                  display: none;
                }
                .name {
                  display: none;
                }
                :host div:not(.name) {
                  display: none;
                }

maybe there is a card_mod way of hiding the complete entity, havent checked that 100% yet

            card_mod:
              style: |
                :host div {
                  display: none;
                }

takes away all visible sections, but still triggers the handle

created an issue in Frontend on the all none actions