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

[calisro (Rob)]

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?

[Ildar_Gabdullin]

Check this

[calisro (Rob)]

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.

[calisro (Rob)]

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.

[Ildar_Gabdullin]

Have you checked that link?

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

Check this

[calisro (Rob)]

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

[Mariusthvdb (Marius)]

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…

[Ildar_Gabdullin]

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.

[calisro (Rob)]

That did it. Thanks a lot!

@Mariusthvdb

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

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

[calisro (Rob)]

@Ildar_Gabdullin

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

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.

[Ildar_Gabdullin]

@calisro

If a card (auto-entities here) is contained in the fold it’ll push left as you can see in my code

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.

[calisro (Rob)]

@Ildar_Gabdullin

Because the top-level fold-entity-row in your card is containing auto-entities - but you were advised to change it.

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.

@Ildar_Gabdullin

I would choose a “fold-entity-row contains an auto-entiies” schema with card-mod

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

[Ildar_Gabdullin]

@calisro

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.

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

[calisro (Rob)]

@Ildar_Gabdullin

It is possible, but with a help of vertical stack w/o margins.

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?

[Ildar_Gabdullin]

@calisro

The vertical stack can’t be placed under the fold-entity-row without something like custom:hui-element

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

@calisro

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.

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

@calisro

Do you have an example using vertical stack that produces that result?

I already gave you an example. And already explained:

@Ildar_Gabdullin

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

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

[calisro (Rob)]

@calisro

vertical-stack will give the same issue.

@Ildar_Gabdullin

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

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.

[Ildar_Gabdullin]

@calisro

they both have the same issue

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

[calisro (Rob)]

Let’s see a full example mimicking this:

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

[Ildar_Gabdullin]

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.

[calisro (Rob)]

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.