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

Thanks !
I only added this to the filter:

              exclude:
                - state: '< 1'
                - state: 'unavailable'

since my groups do have a lot of power-entities where the plug is not in use or not available.

Final result

1 Like

I’m also wondering about using templating within this card. I’m trying to make a fold-entity-row that’s only open if an entity is “on” — is that possible? So far it’s not giving me errors, but it’s also opening the row regardless of the entity’s state:

type: custom:fold-entity-row
open: "{% if is_state('light.mainfloor', 'on') %} true {% else %} false {% endif %}"
head:
  entity: light.mainfloor
  name: Main Floor
  icon: mdi:sofa
entities:
  - type: custom:fold-entity-row
    head:
      entity: light.livingroom
      name: Living Room
      icon: mdi:sofa
    entities:
      - entity: light.livingroom_ceiling
        type: custom:slider-entity-row
        name: Ceiling Light
        state_color: false
        hide_when_off: true
        toggle: true
      - entity: light.brass_floor_lamp
        name: Floor Lamp
        type: custom:slider-entity-row
        state_color: false
        hide_when_off: true
        toggle: true
      - type: divider
  - type: custom:fold-entity-row
    head:
      entity: light.kitchen
      name: Kitchen
      icon: mdi:chef-hat
    entities:
      - entity: light.kitchen_sink
        type: custom:slider-entity-row
        name: Kitchen Sink
        state_color: false
        hide_when_off: true
        toggle: true
      - entity: light.breakfast
        type: custom:slider-entity-row
        name: Breakfast Table
        state_color: false
        hide_when_off: true
        toggle: true
      - type: divider
  - type: custom:slider-entity-row
    entity: light.chandelier
    name: Dining Room
    icon: mdi:silverware
    state_color: false
    hide_when_off: true
    toggle: true
  - type: custom:slider-entity-row
    entity: light.entry
    name: Entryway
    icon: mdi:door-open
    state_color: false
    hide_when_off: true
    toggle: true

Possible with config-template-card

Sometimes it could be great to allow / disallow to fold / unfold items.
This may be achieved by using card-mod.
The idea is to hide a chevron button:

type: entities
title: hidden chevron
entities:
  - entity: input_boolean.test_boolean
    name: lock unfold
  - type: custom:fold-entity-row
    card_mod:
      style: |
        div#head ha-icon {
          {% if is_state('input_boolean.test_boolean','on') %}
          display: none;
          {% endif %}
        }
    head:
      type: section
      label: More details...
      card_mod:
        style: |
          .label {
          {% if is_state('input_boolean.test_boolean','on') %}
          color: var(--disabled-text-color) !important;
          {% endif %}
          }
    padding: 15
    open: false
    clickable: false
    entities:
      - entity: sun.sun
      - entity: sun.sun

How it works:

  1. When the chevron is not hidden it can be used to fold/unfold items:
    image
    image

  2. When the chevron is hidden it cannot be used:
    image

  3. But there is a problem: if the items are unfolded and the chevron is hidden - then the items continue to be unfolded (which is wrong):
    image

Ideally when setting the “locking condition” to “on” we should unfold the items too. But I do not know any method to achieve this.

Surely we may use a config-template-card to set an “open” option dependingly on the same condition as described above. But then we have to list all entities in the “entities” option of the config-template-card (which may be cumbersome).
Here is an example:

type: entities
title: hidden chevron
entities:
  - entity: input_boolean.test_boolean
    name: lock unfold
  - type: custom:config-template-card
    variables:
      OPEN: states['input_boolean.test_boolean']
    entities:
      - ${OPEN.entity_id}
      - sun.sun
    row:
      type: custom:mod-card
      card_mod:
        style:
          fold-entity-row $: |
            div#head ha-icon {
              {% if is_state('input_boolean.test_boolean','on') %}
              display: none;
              {% endif %}
            }
      card:
        type: custom:fold-entity-row
        head:
          type: section
          label: More details...
          card_mod:
            style: |
              .label {
              {% if is_state('input_boolean.test_boolean','on') %}
              color: var(--disabled-text-color) !important;
              {% endif %}
              }
        padding: 15
        open: '${OPEN.state === "on" ? false : true}'
        clickable: false
        entities:
          - entity: sun.sun
          - entity: sun.sun

image
image

How it works:

  1. If some condition is FALSE:
  • the chevron is visible and the items may be folded / unfolded;
  • the initial state is “items are unfolded” (open: true).
  1. If some condition is TRUE:
  • the chevron is hidden and the items cannot be folded / unfolded;
  • the state is “items are folded” (open: false).

A disadvantage of this method is “items should be unfolded by default”.

Related issues:

Am I doing something wrong or can anyone tell me why I am getting spaces to the left of the auto-entities when included within the expand row?

Both sun entities are included in the fold. One is included via the auto-entities and one is just a plain old entity add. I seem to be getting padding on the left for any auto-entities.

I would expect with this example, both suns to be lined up since they are both part of the same fold with the same padding defined. Is this a bug? or operator error?

EDIT: Actually I see WHY. auto-entities is a card, not a row so its in the wrong place.

Suggestions on HOW to do this correctly?

Check this

Thanks but yes I tried that as well. The issue here is I am trying to combine a nested fold and then single entities. In the example the two suns really would be different entities.

This is the structure:

-> Fold 1    (correct padding)
--> Fold 2   (correct padding)
    \auto-entities\ (incorrect padding-left since this is a card and not a row)
--> entity1  (correct padding)
--> entity2  (correct padding)
--> entity3  (correct padding)

No matter how i attempt to structure the above, the left padding spacing is off for the Fold 2 since its a card and not a row. The card doesn’t honor the padding:0 and if auto-entities isn’t wrapped within a fold, it isn’t padded naturally.

THis is better picture of what is happening. The motion sensors are indented as if they are under the fold but they are not. The are a seperate set of entities (unfortunately contained in a dynamic card because of auto-entities. The spacing to the left of those motion entities is what should be pushed left to the same level as the ‘timers’ fold.

Have you checked that link?

Yes I checked the link. That won’t work as it will do exactly the same thing.

if you use an auto-entities inside a fold use a card_mod to position the auto-entities:

  - type: custom:fold-entity-row
    card_mod: *scroll
    head:
     type: section
     label: Totaal verbruik daystart
     card_mod: *label
    padding: 0
    entities:
      - type: custom:auto-entities
        card:
          type: entities
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: -16px -16px 0px -16px;
              }

btw, only using a single entity inside an auto-entities is not very useful…

1 Like

Then I do not see any horizontal padding:

type: entities
title: fold-entity-row + auto-entities
entities:
  - type: custom:auto-entities
    card:
      type: custom:fold-entity-row
      head:
        type: custom:template-entity-row
        name: Test
        icon: mdi:car
      padding: 0
      open: true
    filter:
      include:
        - entity_id: sun.*
        - entity_id: sun.*
  - sun.sun

изображение

There is a bad-looking margin-top styling for the 1st folded row but this is another issue…
This could be fixed by card-mod - if this issue is solved (see my comments for fold-entity-row).

P.S. Guess you are missing “padding: 0” option.

That did it. Thanks a lot!

No it was an example. I have a ton of timers in the fold. Was just testing.

You’re missing the outer fold. If a card (auto-entities here) is contained in the fold it’ll push left as you can see in my code. I have it fixed now though with card-mod.

Because the top-level fold-entity-row in your card is containing auto-entities - but you were advised to change it.
Of course, if fold-entity-row contains “entities card” you will have horizontal paddings, then card-mod is the only way.
Actually, in your position, with so many rows & many folded lists, I would choose a “fold-entity-row contains an auto-entiies” schema with card-mod (+scrollbars) too.

If I remove the top level fold then I can’t create two folds with different entities nested like in my example along with auto-entities.

I’m not sure what that means. I understand the scrollbar mention but not what else you meant there.

It is possible, but with a help of vertical stack w/o margins.
Just place auto-generated 2-levels lists in a stack.
Here is an example of a list of groups:

        type: custom:auto-entities
        card:
          type: custom:fold-entity-row
          head:
            type: section
            label: All groups
          padding: 0
          open: true
        unique: true
        show_empty: true
        filter:
          include:
            - domain: group
              options:
                type: custom:auto-entities
                card:
                  type: custom:fold-entity-row
                  head:
                    entity: this.entity_id
                  padding: 0
                  open: false
                unique: true
                show_empty: true
                filter:
                  include:
                    - group: this.entity_id

Imagine that you have many similar lists placed in a stack (stack-in-card, for instance).

vertical-stack will give the same issue. The vertical stack can’t be placed under the fold-entity-row without something like custom:hui-element (if this is done, you have the same issue). If the vertical stack is placed at the top most level, you still need to nest the fold/auto-entities just the way I have them.

The end result should look like I have it now in the screenshot above. Do you have an example using vertical stack that produces that result?

I do not mean that.
What I mean is:

type: some-stack-card
cards:
  - auto-entities inside fold-entity-row (each element may be also auto-entites inside fold-entity-row)
  - auto-entities like above
  - etc

Not exactly. Each card will be auto-entities - see my example above which does not have horizontal padding.

I already gave you an example. And already explained:

Repeat: there are TWO options:

  • use Entities card with fold-entity-rows containing auto-entities + card-mod with negative margins;
  • use stack with fold-entity-rows containing auto-entities + card-mod to remove spaces between stacks (or use ready stack-in-card).

It is up to you which way to choose. Sometimes the 2nd 1st way is better since CURRENTLY there are some problems with styling fold-entity-row inside auto-entities (if needed) if using 1st 2nd way; and these problems may be solved when using 2nd 1st way; this also includes a possibility to add a scrollbar by card-mod.
Update - I meant the FIRST way in the para before

:rofl:

Buddy, As I said, they both have the same issue and both use card-mod to fix them. Marius solved this many posts back. Everything you’ve suggested has the same issue and still requires card-mod. I’m only replying at this point so some other person doesn’t come along and try to use vertical-stack to fix this per your recommendation.