Automatic layout doesn't work

[ildar170975]

Checklist:

• [ X ] I updated to the latest version available
• [ X ] I cleared the cache of my browser

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:

1. Add Speedtest integration.
2. Create an empty tab.
3. Add a new card:

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: 2

4. The created card is like this: https://community-assets.home-assistant.io/original/3X/f/4/f400502463965a9d1875027ed469efee6999dfa8.jpeg

5. 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:

...
variables:
  - 'states[''input_select.graph_hours_to_show_speedtest'']'
...
card:
  type: vertical-stack
  cards:
    - type: history-graph
      entities:
        - entity: sensor.speedtest_download
      hours_to_show: '${vars[0].state}'

I excluded that variable just to simplify the case.

Javascript errors shown in the web inspector (if applicable):

Additional information:

[iantrich]

All your cards are in a vertical stack, why would you expect anything else?

[ildar170975]

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

[iantrich]

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

[ildar170975]

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.

[sicknesz]

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

[sicknesz]

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.

[ildar170975]

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.

[iantrich]

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.

[ildar170975]

I managed to bypass the issue by using custom:layout-card with vertical-layout and layout-break.

[QbaF]

The bypass do works. It could be temporary solution.