How to make 3 vertical-stack columns display correctly

Configuration
1

I’m trying to make 3 vertical-stack columns on a single page. If I just add 3 separate vertical-stacks to a page, the 2nd and 3rd vertical-stacks are automatically forced into a single column (even though there’s plenty of room for a 3rd column):

3normalcolumns
3normalcolumns2525×1329 484 KB

Here’s the the raw code:

code.yaml

…I even tried placing each vertical-stack into one big horizontal stack; however, Lovelace is squishing them into narrow columns, instead of taking advantage of the width of the display.

3columns
3columns1980×1033 114 KB

Could someone please help me display these 3 vertical-stacks in 3 normal-width columns? Thank you in advance.

1 Like
2

I think this is related to the use of the stack-in-card . The issue also rear its head with the vertical-stack-in-card.

I had similar issues and it seemed to be linked to views with the vertical-stack-in-card. Then I tried the stack-in-card and got the same result. Removing those custom cards solved the issue and I get normal distribution of cards.

Try refreshing via the refresh in the upper right hand corner. Do the same using a browser refresh? Are the results different?

3

Your second attempt might work if you have panel: true in your view configuration.

Otherwise custom:layout-card in vertical mode using breaks wherever you want them.

4

Thanks. Setting panel: true did make my second attempt look better, however, if the display area is large, the cards also get too big.

Layout-card kind of works, however, I’m getting the below showing instead of an invisible line-break:
break

Can you please tell me the correct way to use “break” considering my code below?

CODE2.yaml

UPDATE: I can’t seem to figure out what I’m doing wrong. I just verified that the plugin is installed correctly. I tried using min_columns: 3 …that didn’t work.

Thanks for all your help.

5

I just saw that the layout-card addon almost always requires panel mode. However, when I turn on panel mode on my “first attempt” code, it completely ruins my page layout.

@eggman I’m hoping you’re still reading this. I’ve tried several different ways to use Layout-card, using vertical mode, however, “break” is not recognized. I would really appreciate it if you could look at my code to see what I’m doing wrong. All I need is to split the 2nd and 3rd column.

7 
type: custom:layout-card
layout: vertical
cards:
  - type: vertical-stack
    cards:
      - your cards

  - break
  - type: vertical-stack
    cards:
      - your cards

  - break
  - type: vertical-stack
    cards:
      - your cards

in panel mode.

You don’t actually need the vertical stacks and could just list the cards in each section but as you’ve already got them, this is simpler to explain.

1 Like
8

@eggman thanks for the reply. I actually tried removing the vertical stacks to do this more cleanly, but then I quickly realized why I had vertical-stacks in the first place. Lovelace wouldn’t allow me to place certain cards adjacent to each other; hence, I had to force them together using vertical-stacks.

I actually attempted to do exactly what you suggested in my previous post yesterday. However, I’m not able to get the formatting/syntax right to incorporate layout-card and respective -break’s. I would really appreciate your assistance.

Honestly, I only really need to split the last two vertical stacks with a single -break, but I don’t know how :frowning:

Code:

Original-working.yaml

new-broken.yaml

9

How to do 4 columns in year 2024?
GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. default is different for expanded a closed sidebar.