Open ildar170975 opened 3 years ago
All your cards are in a vertical stack, why would you expect anything else?
All your cards are in a vertical stack
I have THREE cards. Each has vertical-stack inside. But they are three SEPARATE cards. That's why these cards are supposed to be in different columns.
If I exclude "config-template-card" from each card and specify just "history-graphs inside vertical-stack" (i.e. without templates) - then these cards will be in three columns (https://community-assets.home-assistant.io/original/3X/e/7/e76407ff93818313f6e43a157fe2a5c3f7a5fbe3.jpeg):
type: vertical-stack
cards:
- type: history-graph
entities:
- entity: sensor.speedtest_download
hours_to_show: 24
refresh_interval: 0
- type: history-graph
entities:
- entity: sensor.speedtest_upload
hours_to_show: 24
- type: history-graph
entities:
- entity: sensor.speedtest_ping
hours_to_show: 2
Currently with "config-template-card" I found only one reliable way to place in separate columns - custom:layout-card with "view: panel mode":
type: 'custom:layout-card'
layout: vertical
cards:
- type: 'custom:config-template-card'
entities:
- sensor.speedtest_download
- sensor.speedtest_upload
- sensor.speedtest_ping
card:
type: vertical-stack
cards:
- type: history-graph
entities:
- entity: sensor.speedtest_download
hours_to_show: 24
- type: history-graph
entities:
- entity: sensor.speedtest_upload
hours_to_show: 24
- type: history-graph
entities:
- entity: sensor.speedtest_ping
hours_to_show: 24
- break
- type: 'custom:config-template-card'
entities:
- sensor.speedtest_download
- sensor.speedtest_upload
- sensor.speedtest_ping
card:
type: vertical-stack
cards:
- type: history-graph
entities:
- entity: sensor.speedtest_download
hours_to_show: 24
- type: history-graph
entities:
- entity: sensor.speedtest_upload
hours_to_show: 24
- type: history-graph
entities:
- entity: sensor.speedtest_ping
hours_to_show: 24
- break
- type: 'custom:config-template-card'
entities:
- sensor.speedtest_download
- sensor.speedtest_upload
- sensor.speedtest_ping
card:
type: vertical-stack
cards:
- type: history-graph
entities:
- entity: sensor.speedtest_download
hours_to_show: 24
- type: history-graph
entities:
- entity: sensor.speedtest_upload
hours_to_show: 24
- type: history-graph
entities:
- entity: sensor.speedtest_ping
hours_to_show: 24
My guess would be that the stack is not returning the card size in time. Might have to await for the element to resolve first...ugh
I wonder why it works fine with case "vertical-stack + non-template-card" and doesn't with case "vertical-stack + config-template-card". May be some issues about templating.
I have almost the same issue, created a variable vpd_graph_duration, using it to set the
hours_to_show: '${vars[4]}'
of one of my mini-graph-card, it works but i have to manually trigger the ui update or else it will keep the initial value, i guess it's because config-template-card only initialize variable at startup
I got it to work, in my case it was the entity list not having all the entities i needed to have updated, used the devtools and figured it out.
Now I have to admit that the problem also happens without vertical-stack card. It happens at least with Entities Card:
type: 'custom:config-template-card'
entities:
- sun.sun
card:
type: entities
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
Add three same cards - all of the will be in one column.
The problem is that core is not waiting for the card to resolve the size before determining the layout. Could possibly add a config option as a crude workaround.
I managed to bypass the issue by using custom:layout-card
with vertical-layout
and layout-break
.
The bypass do works. It could be temporary solution.
Checklist:
Release with the issue: 1.2.0
Last working release (if known):
Browser and Operating System: Win10x64 Firefox 81.0.1
Description of problem:
Found a problem with config-template-card. Two or more cards are not distributed properly on the screen - all of them are placed in one column.
How to reproduce:
The created card is like this: https://community-assets.home-assistant.io/original/3X/f/4/f400502463965a9d1875027ed469efee6999dfa8.jpeg
Then duplicate this card. Two…three cards are enough to see the issue. All cards are placed in one column.
Note, in this example there is no “variables” section - my actual code was like this:
I excluded that variable just to simplify the case.
Javascript errors shown in the web inspector (if applicable):
Additional information: