knottyau75
(Knottyau75)
October 15, 2018, 11:57am
1
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
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
petro
(Petro)
October 15, 2018, 12:38pm
2
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
knottyau75
(Knottyau75)
October 16, 2018, 10:40am
3
Thanks Mate,
trust me to choose the wrong way around.
Matthew
knottyau75
(Knottyau75)
October 16, 2018, 11:27am
4
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
petro
(Petro)
October 16, 2018, 11:50am
5
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.
petro:
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.