🔹 fold-entity-row - Hide away stuff in entities cards

[Mariusthvdb (Marius)]

sounds as if we’re on to something…

how do I do that:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Day after tomorrow
      style: |
        :host div {
          padding: 0px;
        }
    entities:
      - entity: sensor.dark_sky_forecast_icon_2d
        name: Condition 2 day
      - entity: sensor.dark_sky_forecast_daytime_high_temperature_2d
        name: High temp 2 day
      - entity: sensor.dark_sky_forecast_overnight_low_temperature_2d
        name: Low temp 2 day
      - entity: sensor.dark_sky_forecast_precip_intensity_2d
        name: Intensity 2 day
      - entity: sensor.dark_sky_forecast_precip_probability_2d
        name: Probability 2 day
      - entity: sensor.dark_sky_forecast_summary_2d
        name: Summary 2 day

doesn’t help. Must be wrong? https://www.w3schools.com/css/css_padding.asp instructs to do so?

related:
using

      - type: custom:fold-entity-row
        head:
          type: section
          label: More detailed info
        style: |
          :host div#items {
            margin: 0px 0px 0px -20px;
          }
        entities:
          - sensor.locatie
          - sensor.rain
          - sensor.humidity

works perfectly, but the same style on the above dark_sky entities doesnt:

  - type: custom:fold-entity-row
    head:
      type: section
      label: in 3 days
      style: |
        :host div#items {
          margin: 0px 0px 0px -36px;
        }
    entities:
      - entity: sensor.dark_sky_forecast_icon_3d
        name: Condition 3 day
      - entity: sensor.dark_sky_forecast_daytime_high_temperature_3d
        name: High temp 3 day
      - entity: sensor.dark_sky_forecast_overnight_low_temperature_3d
        name: Low temp 3 day

why is that?
do I need a different div for a list of entity objects?

duh, wrong indent…

  - type: custom:fold-entity-row
    head:
      type: section
      label: in 4 days
    style: |
      :host div#items {
        margin: 0px 0px 0px -20px;
      }

working perfectly.

still looking for the ‘padding’ solution. tried the same ‘correct’ indent on

      style: |
        :host div {
          padding: 0px;
        }

but that doesnt work, so please help me out there?

[reste_narquois (Chris Warne)]

@thomasloven is referring to the padding option in the standard available parameters for the card, that you can set without using card-mod (see documentation).

But as far as I can tell, this only adjusts the padding on the left hand side of the folded rows, so I use card-mod to set the indent on the right-hand side. But here’s the code with the left padding set to 0:

- type: custom:fold-entity-row
  padding: 0
  head:
    type: ...

[Mariusthvdb (Marius)]

well I be…
I had completely missed that. And it does exactly what I was looking for, the same as

    style: |
      :host div#items {
        margin: 0px 0px 0px -20px;
      }

really sorry for this.
and thanks for pointing me to it.

everything beautifully aligned. Not sure what indent you want to change on the right hand side?

unfortunately, it doesnt work for an auto-entities card under the fold:

      - type: custom:fold-entity-row
        head:
          type: section
          label: More Waqi info
        padding: 0
        entities:
          - type: custom:auto-entities
            card:
              type: entities
              style: |
                ha-card {
                  box-shadow: none;}
#                  margin: 0px -16px 0px -36px;
#                }

and I need the margin to be set in the style.

[Vintage89]

Is it possible to change the color and size of the font for the label?

Like this one: Could I change «Roberto» to white and same font size as the rest of the list?

My code looks like this now:

entities:
  - entities:
      - entity: switch.roberto_kitchen
      - entity: switch.roberto_kontor
      - entity: switch.roberto_sofa
      - entity: switch.roberto_tv
      - entity: switch.roberto_spisebord
      - entity: sensor.roberto_status
        icon: 'mdi:robot-vacuum-variant'
      - entity: sensor.vacuum_battery
        icon: 'mdi:battery'
        name: Batteri
    head:
      label: Roberto
      type: section
    theme: ios-dark-mode
    type: 'custom:fold-entity-row'
type: entities

[parautenbach (Pieter Rautenbach)]

@lseufer

Hi @thomasloven is it possible to put glance type/card entities in a fold-entity-row? I have been trying many combinations but I can’t find one that works. Cheers!

I’m looking for the same thing now. Is this possible?

To be more specific: I have a camera as a picture glance card and would like to by default have it collapsed. Perhaps there’s another solution to this. I’m keen to hear.

[eggman (bertie basset)]

Have you tried this?

hui-element - Use built-in elements in the wrong place

Funny thing about lovelace - cards, rows in the entities card, badges and elements in the picture-elements card work exactly the same behind the scenes. That means that you can use them interchangeably if you know how, and e.g. put a button right in an entities card, a badge somewhere in the middle of your view or a markdown card (with background and border removed) right in your carefully crafted picture-elements card. Pretty neat stuff that allows for some fantastic creations. However. Becau…

[parautenbach (Pieter Rautenbach)]

Great, thanks, @eggman – I’ll check this out.

[Shoomaan (Lars)]

Good Evening,

I have a Problem with the combination of auto-entities and fold-entity-row. When trying the examples from your help file, I get no frame in the frontend. Example all groups (frame) and example automatically populated (no frame) .

Could someone explain me what I can do to change this behaviour ?

[eggman (bertie basset)]

It would help if you posted your YAML

[Shoomaan (Lars)]

type: custom:auto-entities
card:
  type: entities
  title: All groups
filter:
  include:
    - domain: group
      options:
        type: custom:fold-entity-row

type: custom:auto-entities
filter:
  include:
    - domain: sensor
card:
  type: custom:fold-entity-row
  head:
    type: section
    label: Automatically populated

[thomasloven (Thomas Lovén)]

That all still needs to go inside an entities card.

[Shoomaan (Lars)]

Thank you very much for this hint
Got it right the way it should be.

[Niall (Niall Scott)]

Hello,

I am new to HA and I am trying to build a drop-down which is kind of working but I cant figure out dynamic labels. I want my label to say “Brightness: 108 lux” for example, I am trying to set a label using

'label: >
[[[return ‘Brightness: ’ + sensor.living_room_lux + ‘Lux’]]]’

Unfortunately, all it is outputting is the code for the label:

My code is:

- type: horizontal-stack
            cards:
              - type: custom:button-card
                styles:
                  card:
                    - opacity: 0
                    - width: 25px
                    - height: 1px
              - type: entities
                style: |                  
                  ha-card {
                    background: none;
                    box-shadow: none;
                    border-radius: none;
                  }
                entities:
                  - type: custom:fold-entity-row
                    head:
                      type: section
                      label: >
                        [[[return 'Brightness: ' + sensor.living_room_lux  + 'Lux']]]

Could someone point me in the direction of where I have gone wrong?

Many thanks

[Alfiegerner]

Does anyone know if I can make a section open conditioned on the state of another entity, e.g.:

open: '{{ states.remote.lounge == "on" }}'

I’m open to any method to solve, all suggestions welcome.

Thanks.

[DavidFW1960 (David)]

There is a conditional card you can use for that… a core card

[thomasloven (Thomas Lovén)]

That’s a good solution.

[JZhass]

Trying to do something pretty simple but having a hard time. It’s really a use of fold-entity-row and auto-entities. I’m simply trying to show all of my rooms/groups fold-able but only display switches/lights that are on.

None of these attempts seem to work… would appreciate any hints. It seems logical to break down foldable rooms and only show entities of a specific state. TIA!

card:
  show_header_toggle: false
  title: TEST Currently On
  type: entities
filter:
  exclude:
    - state: 'off'
  include:
    - domain: group
      options:
        open: true
        type: 'custom:fold-entity-row'
      state: 'on'
show_empty: false
type: 'custom:auto-entities'

Another failure:

type: entities
title: Test
entities:
  - type: 'custom:fold-entity-row'
    head: group.office
    open: true
  - type: 'custom:fold-entity-row'
    head: group.hallway
    open: true

[thomasloven (Thomas Lovén)]

How don’t they work?

[JZhass]

Thanks for responding @thomasloven — the biggest problem is that I’m not able to filter CHILD items. Meaning I’m able to show all of my groups but when I filter for ON state it filters on the group not the children. The goal is to show each group and ONLY child items that are in the ON state. See the below result from my top example and notice that it contains entities that are in the OFF state:

[cyn]

I’m trying to reduce the space between entities on the fold-entity-row but can’t seem to find the right combination. Any suggestions? Thanks

type: vertical-stack
cards:
  - type: entities
    title: User Setup - HA RESTARTS when changed
    style: |
      .card-header {
        font-size: 1.5em;
        font-weight: bold;
        padding: 10px 16px 16px 16px;
      }
      :host div#items {
        margin: -10px 0px !important;
      }
    show_header_toggle: False
    entities:
      - input_select.user_selection
      - !include /home/homeassistant/.homeassistant/ui-lovelace/ui-lovelace-User-Setup-Notifications.yaml
      - !include /home/homeassistant/.homeassistant/ui-lovelace/ui-lovelace-User-Setup-Automations.yaml
      - !include /home/homeassistant/.homeassistant/ui-lovelace/ui-lovelace-User-Setup-Components.yaml