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:
-
When the chevron is not hidden it can be used to fold/unfold items:
-
When the chevron is hidden it cannot be used:
-
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):
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
How it works:
- 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).
- 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?
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?
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
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.