Position of 2 vertical stacks

Configuration Frontend
1 
title: "Home"
path: "home"
cards:
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        view_layout:
          # position: left
          width: 33%  # 1/3 van de breedte
        cards:
          - type: "custom:stack-in-card"
            cards:          
              - type: custom:mushroom-entity-card
....
      - type: vertical-stack
        view_layout:
          # position: right
          width: 66%  
        cards:

gives me this result…

tablet
tablet1638×950 85.2 KB

how do I remove the white zone left and right ?

2

Where did “view_layout” come from? I don’t see it in the vertical stack docs.

Having said that, panel view will expand the columns to fill the screen.

1 Like
3

hmm. when I use type:panel I get unknown type encountered: panel

4 
title: "Home"
path: "home"
panel: true # !!!!!!!!!!!!!!!
cards:
1 Like
5

wow, that simpel :slight_smile:

and how can I make my first column smaller ?

6

Please do mark a post of Jack as a solution, technically they proposed a panel layout ).
To make a column smaller: go to main card-mod thread → 1st post → link at the bottom titled “fantastic post” → styles for horiz stack

1 Like
7 
type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root > :first-child > * {
        width: 30%;
        flex: auto; 
      }
      div#root > :last-child > * {
        width: 70%;
        flex: auto; 
      }
card:
  type: horizontal-stack

like this ?

8

May be if you took it from my post, cannot check.

9

i took it from here : 🔹 Card-mod - Add css styles to any lovelace card - #1731 by Ildar_Gabdullin?

title: "Home"
path: "home"
panel: true
cards:
  type: custom:mod-card
  card_mod:
    style:
      hui-horizontal-stack-card $: |
        div#root > :first-child > * {
          width: 30%;
          flex: auto; 
        }
        div#root > :last-child > * {
          width: 70%;
          flex: auto; 
        }
  card:
    - type: horizontal-stack
      cards:

but I get a white screen …

10

Compare your 2 codes from this & prev posts, they are different, the latest is wrong.

1 Like
12 
title: "Home"
path: "home"
panel: true
cards:
  - type: custom:mod-card
    card_mod:
      style:
        hui-horizontal-stack-card $: |
          div#root > :first-child > * {
            width: 20%;
            flex: auto; 
          }
          div#root > :last-child > * {
            width: 80%;
            flex: auto; 
          }
    card:
      type: horizontal-stack
      cards:
        - type: vertical-stack
          cards:
            - type: "custom:stack-in-card"
            - type: "custom:stack-in-card"

        - type: custom:mod-card
          style: |
            ha-card {
              margin-top: 170px;  
            }
          card:
            type: conditional
            conditions:
              - entity: input_select.dashboard_view
                state: 'verlichting'
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: custom:mushroom-template-card

i still got a lot of white space between “the menu” and the stuff right …