šŸ”¹ fold-entity-row - Hide away stuff in entities cards

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.

Which ā€œsame issueā€, buddy? The initial problem was about horizontal padding. The ā€œstack methodā€ does not have this problem.
OK, itā€™s up to you).

Letā€™s see a full example mimicking this:

image

where:

- entity
- House Activity (fold):
- - (timers) Folded auto-entity
- - - auto-entity 1 item 1
- - - auto-entity 1 item 2
- - (kitchen motion) auto-entity 2 item1
- - auto-entity 2 item2
- - auto-entity 2 item3

The example which I already gave you may be adapted:

  1. letā€™s call the whole code in that example ā€œmodule Xā€; if needed - add static rows (i.e. not folded) inside auto-entities on a required level (either via ā€œentitiesā€ option or via one more filter);
  2. place as many ā€œmodules Xā€ as you need in one stack-in-card.

As a result - you have LIST with a same horiz padding: each row is a folded list of auto-entiies, and each element may be either a folded list of auto-entities or some ā€œstatic rowā€.
If you need not-folded rows on the 1st level - add them as Entities card (and yes, here card-mod is needed to add/remove top/bottom margin or padding for the card, do not remember exactly).

Actually, using a ā€œstackā€ concept in UI cay give you a lot of benefits - each card may be presented as a stack (for instance, some card = a few entity rows, some graph, a few entity rows, a logbook , ā€¦). This may be achieved by placing each card in a stack.

Exactly. To get to my example, you still need card-mod and stacking doesnā€™t do anything to fix it. And obviously if I wanted a static list, I wouldnā€™t be using auto-entities in the first place.

You are not getting the difference.
In case of using a ā€œstack methodā€ you only need card-mod in places like ā€œadd a non-folded row on a root level - for that place Entities card with removed top or bottom margin/paddingā€.
In case of using YOUR method you need to WIDEN the Entities card (by negative margins) for EACH list.

Probably you should make a simple TRY.
I stopped convincing you.

face palm I understood the difference 10 posts back. Its not a solution.

hello,

First of all thanks for you great add on, i have been using it for a while now! Very convenient!

is it possible to add an icon for the word ā€œrolluikenā€.
My try doesnt workā€¦ (so the ā€œicon: mdi:windows-shutterā€ part)ā€¦

type: custom:fold-entity-row
head:
  type: section
  label: Rolluiken
  icon: mdi:window-shutter
entities:
  - type: custom:fold-entity-row
    head: cover.woonkamer
    entities:
      - entity: cover.kids_corner_zuid
      - entity: cover.kids_noord
      - entity: cover.wk_achter
      - entity: cover.wk_voorzijde
      - entity: cover.zitkamer_zuid
  - entity: cover.kantoor
  - entity: cover.slaapkamer_a
  - entity: cover.keuken

Not related to fold-entity-row.
Probably you need to use:
ā€“ either a conventional entity row with an icon - but with hidden ā€œstateā€ part (card-mod);
ā€“ or template-entity-row to specify a name, an icon and w/o showing a ā€œstateā€ part.

Hello All,
I have been using fold-entity-row for a long time and have found it really usefull, thank you Thomas!

Recently I added a fold-entity-row instance to a card which uses config-template-card - which may or may not be a supported combination. The foldable row can be unfolded and folded using the chevron. However, while unfolded if one of the entities ā€˜in the foldā€™ changes state the folded row folds back up.

The card I am using includes a lot of templated values to operate, but this simplified example which removed most of the templating demonstrates the same behaviour. In this example, if the folded row is unfolded, instead of staying unfolded indefinitely it folds when the state of switch.esp_fs_relay changes state.

If line 3 ( - switch.esp_fs_relay) is removed from this example the fold/unfold state is maintained is the state of switch.esp_fs_relay changes, but the change of entity state is not shown on card.

It seems that config-custom-card monitors the state of the entities and triggers an update of the entities card, but the folded/unfolded state of the fold-entity-row reverts to folded.

Should what I am trying to do possible (ie. Using config-custom-card in conjunction with fold-entity-row), or is there an issue with config-custom-card or fold-entity-row?

type: custom:config-template-card
entities:
  - switch.esp_fs_relay
  - binary_sensor.esp_fs_status
  - binary_sensor.esp_fs_ac_sense
card:
  type: entities
  title: '*** Test Card  1 ***'
  entities:
    - type: custom:fold-entity-row
      head:
        name: Status
        entity: binary_sensor.esp_fs_status
        state_color: true
      entities:
        - binary_sensor.esp_fs_ac_sense
        - switch.esp_fs_relay

It triggers rebuilding the card - and this causes a folding.
Try using CTC not for the whole card but for a particular row only.

Thank you for the reply. Your suggestion does work, and prevents the rold-entity-row reverting to the folded state when one of the entities changes state.

However, wrapping each row in a CTC looses the advantage of using CTC in the first place.in my usage case, which without some of the simplification looks like below. The same card definition is used many times in my frontend, with only the ā€˜NODE_NAMEā€™ changing. Multiple CTCs would make the card definition far longer and more complex, and NODE_NAME would need to be changed in many places.

I donā€™t really understand why when CTC is not being used fold-entity-row remembers itā€™s folded/unfolded state when an entiry state changes and the card is rebuilt, but wrapping the card in CTC makes fold-entity-row revert to folded with every card rebuild? Iā€™m not clear whether a very small change (to either my config, fold-entity-row or CTC) could make this work, or whether what I am trying to do is not possible for a good reason.

type: custom:config-template-card
variables:
  NODE_NAME: '''esp_fs_e8bb0c'''
entities:
  - ${'switch.'+NODE_NAME+'_relay'}
  - ${'binary_sensor.'+NODE_NAME+'_status'}
  - ${'sensor.'+NODE_NAME+'_location'}
  - ${'sensor.'+NODE_NAME+'_uptime'}
  - ${'binary_sensor.'+NODE_NAME+'_ac_sense'}
  - ${'sensor.'+NODE_NAME+'_signal'}
  - ${'sensor.'+NODE_NAME+'_ac_on'}
  - ${'sensor.'+NODE_NAME+'_kwh'}
  - ${'sensor.'+NODE_NAME+'_cost'}
  - ${'sensor.'+NODE_NAME+'_ip'}
  - ${'sensor.'+NODE_NAME+'_esphome_version'}
  - ${'sensor.'+NODE_NAME+'_source_file'}
  - ${'switch.'+NODE_NAME+'_auto_led_dim'}
  - ${'switch.'+NODE_NAME+'_man_led_dim'}
  - ${'switch.'+NODE_NAME+'_power_led_diags'}
  - ${'switch.'+NODE_NAME+'_wifi_led_diags'}
  - ${'switch.'+NODE_NAME+'_cron'}
  - ${'button.'+NODE_NAME+'_restart'}
  - ${'sensor.'+NODE_NAME+'_heap_free'}
  - ${'sensor.'+NODE_NAME+'_ssid'}
card:
  type: entities
  title: ${ NODE_NAME }
  state_color: true
  entities:
    - type: custom:fold-entity-row
      head:
        name: Status
        entity: ${'binary_sensor.'+NODE_NAME+'_status'}
      entities:
        - type: custom:hui-element
          card_type: custom:template-entity-row
          entity: ${'sensor.'+NODE_NAME+'_esphome_version'}
          name: Node Name
          state: ${ NODE_NAME }
        - entity: ${'sensor.'+NODE_NAME+'_esphome_version'}
        - entity: ${'sensor.'+NODE_NAME+'_source_file'}
        - entity: ${'switch.'+NODE_NAME+'_auto_led_dim'}
        - entity: ${'switch.'+NODE_NAME+'_man_led_dim'}
        - entity: ${'switch.'+NODE_NAME+'_power_led_diags'}
        - entity: ${'switch.'+NODE_NAME+'_wifi_led_diags'}
        - entity: ${'switch.'+NODE_NAME+'_cron'}
        - entity: ${'button.'+NODE_NAME+'_restart'}
        - entity: ${'switch.'+NODE_NAME+'_relay'}
        - entity: ${'binary_sensor.'+NODE_NAME+'_ac_sense'}
        - entity: ${'sensor.'+NODE_NAME+'_heap_free'}
        - entity: ${'sensor.'+NODE_NAME+'_ssid'}
  show_header_toggle: false