lovelace-layout-card
lovelace-layout-card copied to clipboard
FR: Allow to set the order when using grid-layout
I'm trying to auto order the elements in a grid-layout. The elements I'm using are decluttering-card's. The problem is I need to set the order element directly on the childs of the grid but when using the custom:mod-card
it puts the order css element on the ha-card which is a child of the mod-card element so the ordering is not applied. So maybe its a possibility to add the order element to view_layout config?
This is my yaml
- type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
margin: 0
grid-gap: 2vw #var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr)
grid-template-rows: fit-content(100%) fit-content(100%)
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: repeat(2, 1fr)
grid-template-rows: repeat(5, fit-content(100%))
view_layout:
grid-area: persons
cards:
- type: "custom:decluttering-card"
view_layout:
order: 1
template: climb_person_button
variables:
- name: xxxx
...
I also tried following but didn't worked because the style is set on the child of card-mod element:
- type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
margin: 0
grid-gap: 2vw #var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr)
grid-template-rows: fit-content(100%) fit-content(100%)
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-template-columns: repeat(2, 1fr)
grid-template-rows: repeat(5, fit-content(100%))
view_layout:
grid-area: persons
cards:
- type: custom:mod-card
card:
type: "custom:decluttering-card"
template: climb_person_button
variables:
- name: xxxxx
card_mod:
style: |
ha-card {
order: 1;
}
...
Update and add support for javascript templates so I can dynamically set the order value 🙂