dmertens
(Danny)
March 26, 2020, 9:50am
61
OK @Olen ,thanks for your example and doing probably something wrong, but when I copy this in my Dashboard, then i got this error
I figured out, or I think I did from searching on Google the this forum, that I have to add a view option? and yes if I do that then I don’t get an error anymore, but then is my lovelace canvas, dashboard empty if I view it, to be honest this is what happened before I was testing with @thomasloven examples also so please can you explain me what I do wrong here
Olen
(Olen)
March 26, 2020, 10:16am
62
In this example, you need to indent everything to be in line with the entry under “views”
views:
- path: default_view
title: Thius
panel: true
(...)
Each “view” is a tab, and each tab cosists of several cards.
1 Like
"Config is not an object
break"
that is what shows on card to me
sorry, what is that camera
xiaomi?
dmertens
(Danny)
March 28, 2020, 12:32pm
64
Hi @Olen my apologies for the late reply, the wife thought that it was a better idea to do some house chores then playing on my laptop
I updated the code like I understand from your reply, I see now the cards but get these errors, any idea what I’m doing wrong here?
Thanks!
views:
- type: 'custom:layout-card'
column-with: 100%
layout: vertical
max_columns: 3
cards:
- type: markdown
content: Dummy 1
- break
- type: markdown
content: Dummy 2
- break
- type: markdown
content: Dummy 3
- break
- type: markdown
content: Dummy 4
- break
- type: markdown
content: Dummy 5
- break
- type: markdown
content: Dummy 6
- break
dmertens
(Danny)
March 28, 2020, 1:18pm
66
Hi @thomasloven thanks for your quick reply, changed and works! now going to play with it and see if I can get my layout build
Thanks for the links!
title: Thuis Mertens Geysen
views:
- path: default_view
title: Home
panel: true
badges: []
cards:
- type: 'custom:layout-card'
column-with: 100%
layout: vertical
max_columns: 3
cards:
- type: markdown
content: Dummy 1
- break
- type: markdown
content: Dummy 2
- break
- type: markdown
content: Dummy 3
- break
- type: markdown
content: Dummy 4
- break
- type: markdown
content: Dummy 5
- break
- type: markdown
content: Dummy 6
- break
dmertens
(Danny)
March 28, 2020, 3:04pm
67
Yes, Yes, Yes it works! @thomasloven @Olen your great, thanks for your patience and willingness to help this novice a little further!!!
For everybody who need help with this like I did, here is my example!
https://dmertens.stackstorage.com/s/Ucy2BU3DtGPu1DW
I created this for my big screen TV connected to a Raspberry Pi (4 columns)
1 Like
eggman
(bertie basset)
March 29, 2020, 10:26am
68
Not sure whether to post this in the card-mod thread or here - don’t suppose it makes too much difference.
I’m using custom:layout-card in grid layout mode. I’d like to vertically centre a card in the grid area I’ve put it in. In chrome I can add align-self: center to hui-picture-elements-card (as below).
Can I do this with card-mod? I’ve tried applying it to ha-card as a style in picture-elements but that doesn’t work.
I could ‘fudge it’ with an embedded vertical layout-card and a couple of gap-cards but that seems unwieldy.
Darbos
(Darbos)
March 31, 2020, 1:35am
69
Hi is it possible to have the first column the full lenght of the screen? Like this
1 2 3 4
5 6 7
8 9 10
the one would go all the way down to where 8 ends.
Yes. With the grid layout, and by setting height: 100%
to the card with card-mod.
Hi guys,
I am using the standard 8 card example for horizontal card layout and no matter what I do it just displays them vertically, am I missing something?
type: 'custom:layout-card'
layout: horizontal
cards:
- type: entities
title: 1
entities:
- switch.meross_front_led_strips
- type: entities
title: 2
entities:
- switch.meross_front_led_strips
- type: entities
title: 3
entities:
- switch.meross_front_led_strips
- type: entities
title: 4
entities:
- switch.meross_front_led_strips
- switch.meross_front_led_strips
- switch.meross_front_led_strips
- switch.meross_front_led_strips
- type: entities
title: 5
entities:
- switch.meross_front_led_strips
- type: entities
title: 6
entities:
- switch.meross_front_led_strips
- type: entities
title: 7
entities:
- switch.meross_front_led_strips
- type: entities
title: 8
entities:
- switch.meross_front_led_strips
Looks like this:
dmertens
(Danny)
April 5, 2020, 8:59pm
75
benm7
(Ben M)
April 7, 2020, 11:28am
76
Love this card!
Hoping someone can help! I need to be able to have a card whose width grows when other cards are not present (conditional cards) and shrinks when they are. Here are the scenarios:
Scenario 1:
5 columns (all cards shown)
Width of each column: 20%,50%,10%,10%,10%
Scenario 2:
4 columns (one card hidden)
Width of each column: 20%,60%,10%,10%
Scenario 3:
3 columns (two cards hidden)
Width of each column: 20%,70%,10%
Scenario 4:
2 columns (three cards hidden)
Width of each column: 20%,80%
So essentially column 2 grows and shrinks depending on whether cards in columns 3,4,5 exist.
Is this possible?
wixoff
April 10, 2020, 6:04pm
77
I have exactly the same problem. No matter what layout I use, everything ends up in a single column.
Here’s my example, which attempts to force two columns by specifying vertical layout with a break:
# VIEW - Power & Energy
badges: []
cards:
- type: custom:layout-card
layout: vertical
max_columns: 2
min_height: 1
cards:
- type: custom:vertical-stack-in-card
title: Home Power Usage
cards:
- type: custom:mini-graph-card
name: Right Now
points_per_hour: 6
line_color: midnightblue
lower_bound: 0
height: 200
show:
extrema: true
labels: true
points: hover
entities:
- entity: sensor.home_power
- type: horizontal-stack
cards:
- type: custom:bar-card
direction: up
name: Last Hour
height: 120px
color: midnightblue
max: 8000
positions:
value: outside
title: outside
indicator: inside
entity: sensor.average_power_last_hour
- type: custom:bar-card
direction: up
name: Last Day
height: 120px
color: midnightblue
max: 8000
positions:
value: outside
title: outside
indicator: inside
entity: sensor.average_power_last_day
- type: custom:bar-card
direction: up
name: Last Week
height: 120px
color: midnightblue
max: 8000
positions:
value: outside
title: outside
indicator: inside
entity: sensor.average_power_last_week
- type: custom:bar-card
direction: up
name: Last Month
height: 120px
color: midnightblue
max: 8000
positions:
value: outside
title: outside
indicator: inside
entity: sensor.average_power_last_month
- break
- type: custom:vertical-stack-in-card
title: Basement Fridge & Freezer
cards:
- type: custom:mini-graph-card
name: Power
points_per_hour: 6
line_color: darkmagenta
height: 100
lower_bound: 0
icon: mdi:power-socket-us
show:
extrema: true
labels: true
points: hover
entities:
- entity: sensor.basement_plug_power
- type: glance
columns: 3
entities:
- entity: switch.basement_plug_switch
name: Status
tap_action:
action: none
- entity: sensor.basement_plug_current
icon: mdi:gauge
name: Current
- entity: sensor.basement_plug_voltage
icon: mdi:gauge
name: Voltage
- type: custom:vertical-stack-in-card
title: Office PC
cards:
- type: custom:mini-graph-card
name: Power
points_per_hour: 6
line_color: darkmagenta
height: 100
lower_bound: 0
icon: mdi:power-socket-us
show:
extrema: true
labels: true
points: hover
entities:
- entity: sensor.pc_power
- type: glance
columns: 3
entities:
- entity: switch.peanut_1
name: Status
tap_action:
action: none
- entity: sensor.pc_current
name: Current
icon: mdi:gauge
- entity: sensor.pc_voltage
icon: mdi:gauge
name: Voltage
- type: custom:vertical-stack-in-card
title: Clothes Washer
cards:
- type: custom:mini-graph-card
name: Power
points_per_hour: 6
line_color: darkmagenta
height: 100
lower_bound: 0
icon: mdi:power-socket-us
show:
extrema: true
labels: true
points: hover
entities:
- entity: sensor.washer_power
- type: glance
columns: 3
entities:
- entity: switch.washer_switch
name: Status
tap_action:
action: none
- entity: sensor.washer_current
name: Current
icon: mdi:gauge
- entity: sensor.washer_voltage
icon: mdi:gauge
name: Voltage
icon: 'mdi:power-socket-us'
path: energy_tab
title: Energy Monitor
I’m using layout-card version 13 with Firefox 75 on Linux.
eggman
(bertie basset)
April 10, 2020, 6:49pm
78
I may be wrong, but I think Lovelace will put the layout card in a single column, unless you specify panel: true to give the layout card the full screen to play with.
3 Likes
wixoff
April 10, 2020, 8:31pm
79
That was 100% it. Thanks!
Can someone help me with creating a layout like so:
I’ve been going over the documentation and I know it’s probably the grid related part but can’t seem to work it out.
Maybe someone with a similar setup can lend a hand.
Thanks
2 Likes