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

[Mariusthvdb (Marius)]

thought I had it… adding a hui-element card_type: entities below the fold-entity-row, so I could style these entities with a left margin of -26px, so they appear almost as if they are a regular entities card. Which they did

      - type: custom:fold-entity-row
        head:
          type: section
          label: More detailed info
        entities:
          - type: custom:hui-element
            card_type: entities
            style: |
              ha-card {
                box-shadow: none;
                margin: 0px -16px 0px -26px;
              }
            entities:
              - entity: sensor.dark_sky_daily_summary
                name: Daily
              - entity: sensor.dark_sky_hourly_summary
                name: Hourly
              - entity: sensor.dark_sky_temperature
                name: Temperature
              - entity: sensor.dark_sky_cloud_coverage
                name: Cloud coverage

But suddenly I noticed this error (top and bottom error, middle is for a conditional card):

now reverted to:

  - type: entities
    title: Darksky Currently
    entities:
      - entity: sensor.dark_sky_apparent_temperature
        name: Apparent temperature
      - entity: sensor.dark_sky_wind_speed
        name: Windspeed
      - entity: sensor.dark_sky_summary
        name: Summary
      - entity: sensor.dark_sky_icon
        name: Condition
      - type: custom:fold-entity-row
        head:
          type: section
          label: More detailed info
        entities:
          - entity: sensor.dark_sky_daily_summary
            name: Daily
          - entity: sensor.dark_sky_hourly_summary
            name: Hourly
          - entity: sensor.dark_sky_temperature
            name: Temperature
          - entity: sensor.dark_sky_cloud_coverage
            name: Cloud coverage

which is error-free, but shows the entities in the fold-entity-row too much shifted to the right.

How can I style these entities correctly, please have a look?

[reste_narquois (Chris Warne)]

Not 100% sure if this is what you’re after, but this works for me (using card-mod):

          - type: custom:fold-entity-row
            style: |
              :host div#items {
                padding-right: 20px;
              }
            head:

[Mariusthvdb (Marius)]

almost thanks!

before:

just a bit too much to the left, using:

          - type: custom:fold-entity-row
            style: |
              :host div#items {
                margin: 0px 0px 0px -26px;
              }

this seems rather spot on:

          - type: custom:fold-entity-row
            style: |
              :host div#items {
                margin: 0px 0px 0px -20px;
              }

[thomasloven (Thomas Lovén)]

Or maybe you could just set the padding parameter of fold-entity-row to 0, but what do I know?

[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.