david1
(David)
January 14, 2019, 1:14am
1
Can someone help me out? i’d like to start a new horizontal column (just the lights), but i can’t seem to get it working, this is what i have so far
title: My Awesome Home
resources:
- url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.2
type: js
- url: /local/custom_ui/card-modder.js
type: module
- url: /local/custom_ui/weather-card.js
type: js
- url: /local/custom_ui/layout-card.js
type: js
- url: /local/custom_ui/mini-media-player.js?v=0.9.2
type: module
views:
- path: default_view
title: Home
icon: 'mdi:home'
cards:
- type: horizontal-stack
cards:
- type: entities
title: Presense
show_header_toggle: false
entities:
- entity: input_boolean.david_occupancy
name: Davids Home
- type: hortizontal-stack
cards:
- type: light
entity: light.23460a
- type: hortizontal-stack
cards:
- type: light
entity: light.2349a5
1 Like
gbboy
January 14, 2019, 1:36am
2
You only need to reference horizontal-stack once if you want them in a row. If you want two seperate vertical columns, create two vertical-stack cards and place horizontal-stack in them
david1
(David)
January 14, 2019, 1:50am
3
How do you do that? I tried that
gbboy
January 14, 2019, 1:53am
4
Check out the gallery examples. Hui stack cards is the one you’re after.
https://home-assistant-lovelace-gallery.netlify.com/
david1
(David)
January 14, 2019, 2:15am
5
how does he get the three separate columns though? thats what . i really want
gbboy
January 14, 2019, 2:22am
6
Use three vertical-stack cards
david1
(David)
January 14, 2019, 2:25am
7
that just stacks them, it doesn’t put them in there own column
you can put 3 vertical stacks inside a horizontal stack
gbboy
January 14, 2019, 2:32am
9
Just like the examples:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
2 Likes
david1
(David)
January 14, 2019, 2:42am
10
views:
- path: default_view
title: Home
icon: 'mdi:home'
cards:
- type: horizontal-stack
cards:
- type: vertical stack
cards:
- type: entities
title: Whose Home
show_header_toggle: false
entities:
- entity: input_boolean.david_occupancy
name: David
- type: vertical stack
cards:
- type: light
entity: light.23460a
- type: vertical stack
cards:
- type: light
entity: light.2349a5
Isn’t the problem with this approach, though, that the 3 columns will always only take up the width of what a single card would be - unless you make the whole view a panel, right?
david1
(David)
January 14, 2019, 2:51am
12
thats what i wanted… the whole panel, but lost, how do i make the whole view a panel?
ah so I just use 3 vertical stacks and it puts them side-by-side
gbboy
January 14, 2019, 2:59am
14
Use panel: true for your view, it will render the first card to 100% width if you want them in horizontal-stack. As I said originally though, use 3 x vertical stacks to get full width. Or fixed with a horizontal then vertical stack.
Its all fine saying thats what you wanted but you did not say that in your original post clearly.
the problem with that is that on a mobile, you end up with thin columns… with sep vert stacks they display depending on the screen width
1 Like
david1
(David)
January 14, 2019, 3:00am
16
How does it fix my red error?
gbboy
January 14, 2019, 3:01am
17
You forgot the - in vertical-stack. Go read the guides seriously.
david1
(David)
January 14, 2019, 3:04am
18
appreciate the help, but now it’s filled to the rim…, sigh