Lovelace Layout Issues - Can someone Sanity Check

Hi All, I’m starting to play with the new Lovelace UI.

I’m trying to crate a simple Grid layout using Horizontal and Vertical Stacks, But they layout is not working.

I’m hoping to basically create a 3x3 grid, with only the top 3 “spaces” populated and the Middle Right One Populated.

I.E. X X X
X

My Code looks like this :slight_smile:

title: Home
views:
  - title: default_view
icon: mdi:home
cards:
  - type: horizontal-stack
    cards:    
    - type: entity-filter
      entities:
        - device_tracker.22a1b784190d7ece
        - device_tracker.fa69j0307494
        - device_tracker.cc59wym10492
        - device_tracker.c4jdu16727000130
        - device_tracker.galaxys6valhallalocal
      state_filter:
        - 'home'
      card:
        type: glance
        title: People Home
    - type: history-graph
      title: Outside Temperatures
      hours_to_show: 24
      refresh_interval: 60
      entities:
        - sensor.bom_local_feels_like_c
        - sensor.outside_temperature
    - type: vertical-stack
      cards: 
      - type: entity-filter
        entities:
          - switch.kitchen_light2
          - switch.kitchen_light
          - switch.lr_light
          - switch.lr_light2
          - switch.lr_light3
          - switch.lr_main_light
          - entity: switch.hall_lights
            name: Hall Light (Front)
          - entity: light.hall_front_31
            name: Hall Light (Middle)
          - entity: light.hallway_light_switch
            name: Hall Light (Rear)
          - light.garage_outside_29
          - light.outside_front_32
          - light.parents_light_39
          - switch.deck_lights
          - light.reillys_light_10
          - light.erin_light_22
          - entity: switch.laundry_light_relay
            name: Laundry Light
        state_filter:
          - 'on'
        card:
          type: entities
          title: Lights Currently On
      - type: entity-filter
        entities:
        - fan.living_room_fan
        - switch.erin_fan_21 
        - switch.lounge_fan 
        - switch.parents_fan_38
        - switch.reillys_fan_11 
        state_filter:
        - 'on'
        card:
          type: glance
          title: Fans Currently On

And the output looks like this:

Any Ideas on what Im doing Wrong?

Thanks

you want a vertical stack with 3 horizontal stacks inside it. Vertical stacks always override horizontal stacks.

- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        <3 cards>
    - type: horizontal-stack
      cards:
        <3 cards>
    - type: horizontal-stack
      cards:
        <3 cards>

Also, you should know that horizontal stack does not do what you want. I’m guessing you want 3x3 large cards. Formatting the UI this way is impossible. The UI will always resize itself to fit your browser. So any horizontal stack will be the width of 1 card. The reason for this is so that the UI can be scaled for any size monitor, i.e. cellphone/mobile and desktop. To put this in simple terms, the home assistant UI will never allow for horizontal scrolling.

1 Like

Thanks Mate,

trust me to choose the wrong way around.

Matthew

OK, I’m obviously doing something Fundamentally Wrong.
I have redone the code as suggested (I think)

See here

title: Home
views:
- icon: mdi:home
  cards:
  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
        - type: entity-filter
          entities:
            - device_tracker.22a1b784190d7ece
            - device_tracker.fa69j0307494
            - device_tracker.cc59wym10492
            - device_tracker.c4jdu16727000130
            - device_tracker.galaxys6valhallalocal
          state_filter:
            - 'home'
          card:
            type: glance
            title: People Home
        - type: history-graph
          title: Outside Temperatures
          hours_to_show: 24
          refresh_interval: 60
          entities:
            - sensor.bom_local_feels_like_c
            - sensor.outside_temperature
        - type: entity-filter
          entities:
            - switch.kitchen_light2
            - switch.kitchen_light
            - switch.lr_light
            - switch.lr_light2
            - switch.lr_light3
            - switch.lr_main_light
            - entity: switch.hall_lights
              name: Hall Light (Front)
            - entity: light.hall_front_31
              name: Hall Light (Middle)
            - entity: light.hallway_light_switch
              name: Hall Light (Rear)
            - light.garage_outside_29
            - light.outside_front_32
            - light.parents_light_39
            - switch.deck_lights
            - light.reillys_light_10
            - light.erin_light_22
            - entity: switch.laundry_light_relay
              name: Laundry Light
          state_filter:
            - 'on'
          card:
            type: entities
            title: Lights Currently On
    - type: horizontal-stack
      cards:
      - type: entity-filter
        entities:
            - fan.living_room_fan
            - switch.erin_fan_21 
            - switch.lounge_fan 
            - switch.parents_fan_38
            - switch.reillys_fan_11 
        state_filter:
          - 'on'
        card:
          type: glance
          title: Fans Currently On

But I get the following in my browser…

So I’m still a little Stuck…

Thanks for your Help

Nope, that’s what horizontal stacks do. A horizontal stack has the maximum width of 1 card width. Like I said, I don’t think you can do what you want, it will not look nice.