[SOLVED] Card inside of card (divider)?

Configuration
1

Hi everybody,

I am currently trying to get a cleaner lovelace ui by re-organizing my cards. When I started Home Assistant a couple of weeks ago, I didn’t really care and mostly used entity cards for almost everything. Now that I’ve seen other peoples’ amazing configs, I want to make my UI look nicer, too.

Question:

(how) can I insert a divider into an existing card?

Below is one of my cards. There are two glance cards inside a vertical-stack. What I would like to do is add a divider (custom card) in between separate rooms. I have utilized my advanced editing skills to illustrate what I mean :sweat_smile::

hass
hass808×1053 129 KB

Each row has three columns each (except for the last two rows, which are all one room - it has more than one window) displaying open/close status for each door and window as well as temperature readings per room. I was hoping to add a divider to make it more clear which room is which (while I use AZ for Arbeitszimmer (office) and WZ for Wohnzimmer (living room), this is still rather hard to read when you are just glancing at it on your phone. I just rushed upstairs because I thought one door was open (which is supposed to be shut during the day or when we are not inside that room), just to realized that I confused SZ and ZZ. Plus, it’d just look neater when there could be a “header” for each room.

I am aware that I could just use a single card per room, but if possible I’d prefer to keep it this way and insert the divider into this one card; btw. I just realized that I only screenshotted half the card… of course there is an Oben part as well, which you can see in the config below but not in the screenshot.

I have tried adding the divider like this

cards:
  - columns: 3
    entities:
      - entity: entity1
      - entity: entity2
      - entity: entity3
        # cards:
        card:
          - type: 'custom:text-divider-row'
            text: divider
 # ...

that did not work.

cards:
  - columns: 3
    entities:
      - entity: binary_sensor.tuer_arbeitszimmer_contact
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: sensor.messwerte_arbeitszimmer_temperature
      - entity: binary_sensor.tuer_kueche_contact
      - entity: binary_sensor.fenster_kueche_contact
      - entity: sensor.messwerte_kuche_temperature
      - entity: binary_sensor.tuer_bad_unten_contact
      - entity: binary_sensor.fenster_bad_unten_contact
      - entity: sensor.messwerte_bad_unten_temperature
      - entity: binary_sensor.tuer_wohnzimmer_contact
      - entity: binary_sensor.fenster_wohnzimmer_vorne_contact
      - entity: binary_sensor.fenster_wohnzimmer_mitte_contact
      - entity: binary_sensor.fenster_wohnzimmer_strasse_contact
      - entity: sensor.messwerte_wohnzimmer_strasse_temperature
    title: Unten
    type: glance
  - columns: 3
    entities:
      - entity: binary_sensor.tuer_schlafzimmer_contact
      - entity: binary_sensor.fenster_schlafzimmer_contact
      - entity: sensor.messwerte_schlafzimmer_temperature
      - entity: binary_sensor.tuer_zwischenzimmer_contact
      - entity: binary_sensor.fenster_zwischenzimmer_rechts_contact
      - entity: sensor.messwerte_zwischenzimmer_temperature
      - entity: binary_sensor.tuer_bad_oben_contact
      - entity: binary_sensor.fenster_bad_oben_contact
      - entity: sensor.messwerte_bad_oben_temperature
      - entity: binary_sensor.tuer_jonna_contact
      - entity: binary_sensor.fenster_jonna_contact
      - entity: sensor.messwerte_jonna_temperature
    title: Oben
    type: glance
type: vertical-stack

Can what I want to do be achieved? Or if not, what do you suggest I do to make things easier to read without using countless cards per room?

Thank you for your ideas :pray:

2

Stick an entities card in the middle of your stack (between the two glance cards) and use the special row divider type.

cards:
  - columns: 3
    entities:
      - entity: binary_sensor.tuer_arbeitszimmer_contact
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: sensor.messwerte_arbeitszimmer_temperature
      - entity: binary_sensor.tuer_kueche_contact
      - entity: binary_sensor.fenster_kueche_contact
      - entity: sensor.messwerte_kuche_temperature
      - entity: binary_sensor.tuer_bad_unten_contact
      - entity: binary_sensor.fenster_bad_unten_contact
      - entity: sensor.messwerte_bad_unten_temperature
      - entity: binary_sensor.tuer_wohnzimmer_contact
      - entity: binary_sensor.fenster_wohnzimmer_vorne_contact
      - entity: binary_sensor.fenster_wohnzimmer_mitte_contact
      - entity: binary_sensor.fenster_wohnzimmer_strasse_contact
      - entity: sensor.messwerte_wohnzimmer_strasse_temperature
    title: Unten
    type: glance
  - type: entities
    show_header_toggle: false
    entities:
      - type: divider
  - columns: 3
    entities:
      - entity: binary_sensor.tuer_schlafzimmer_contact
      - entity: binary_sensor.fenster_schlafzimmer_contact
      - entity: sensor.messwerte_schlafzimmer_temperature
      - entity: binary_sensor.tuer_zwischenzimmer_contact
      - entity: binary_sensor.fenster_zwischenzimmer_rechts_contact
      - entity: sensor.messwerte_zwischenzimmer_temperature
      - entity: binary_sensor.tuer_bad_oben_contact
      - entity: binary_sensor.fenster_bad_oben_contact
      - entity: sensor.messwerte_bad_oben_temperature
      - entity: binary_sensor.tuer_jonna_contact
      - entity: binary_sensor.fenster_jonna_contact
      - entity: sensor.messwerte_jonna_temperature
    title: Oben
    type: glance
type: vertical-stack
1 Like
3

So, you can put anything into an entities card, if you want to have 1 giant single card.

cards:
  - type: entities
    entities:
      - type: glance
        entities:
        - entity: entity1
        - entity: entity2
        - entity: entity3
      - type: 'custom:text-divider-row'
        text: divider
      - type: glance
        entities:
        - entity: entity4
        - entity: entity5
        - entity: entity6
      - type: 'custom:text-divider-row'
        text: divider
1 Like
4

Thank you, but that is not what I am trying to do. Your solution inserted a divider between the Oben and the Unten card. What I need is one below - entity: sensor.messwerte_arbeitszimmer_temperature, then one below - entity: sensor.messwerte_kuche_temperatur, below - entity: sensor.messwerte_bad_unten_temperature, and so on. So that I have multiple dividers inside each Oben and Unten card.

5

Thank you! I am currently doing this via the webUI, so I created a manual card and insterted

type: entities
entities:
  - type: glance
    entities:
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: binary_sensor.tuer_arbeitszimmer_contact
      - entity: sensor.messwerte_arbeitszimmer_temperature
  - type: 'custom:text-divider-row'
    text: divider
  - type: glance
    entities:
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: binary_sensor.fenster_arbeitszimmer_contact
  - type: 'custom:text-divider-row'
    text: divider

This will display an error above the card

Your config is not supported by the UI editor:
Expected a value of type `{entity,name,icon} | entity-id` for `entities.0.type` but received `"glance"`.
Falling back to YAML editor.

I do have the custom:text-divider-row installed and am even currently using it.

6

You’ll probably need to use the under the hood glance name.

type: entities
entities:
  - type: 'custom:hui-glance-card'
    entities:
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: binary_sensor.tuer_arbeitszimmer_contact
      - entity: sensor.messwerte_arbeitszimmer_temperature
  - type: 'custom:text-divider-row'
    text: divider
  - type: 'custom:hui-glance-card'
    entities:
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: binary_sensor.fenster_arbeitszimmer_contact
      - entity: binary_sensor.fenster_arbeitszimmer_contact
  - type: 'custom:text-divider-row'
    text: divider
2 Likes
7

Yes!! Exactly what I was trying to do. Thank you so much :slight_smile:

1 Like