my cards arrange to the right of the screen after the first row. How do I get them to arrange and wrap? this has been driving me nuts for months.
Jeff
my cards arrange to the right of the screen after the first row. How do I get them to arrange and wrap? this has been driving me nuts for months.
Jeff
You could try the grid card or the use vertical stack and horizontal stack cards.
type: grid
columns: 4
square: false
cards:
- type: vertical-stack
title: ''
cards:
- type: 'custom:canvas-gauge-card'
card_height: 250
entity: sensor.utility_voltage
background_color: ''
name: ''
gauge:
type: radial-gauge
title: Utility
width: 250
height: 250
minValue: 0
maxValue: 280
startAngle: 40
ticksAngle: 280
valueBox: true
units: Vac
majorTicks:
- 0
- 28
- 56
- 84
- 112
- 140
- 168
- 196
- 224
- 252
- 280
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 218
color: 'rgba(234, 51, 36, .75)'
- from: 218
to: 228
color: 'rgba(255, 255, 85, .75)'
- from: 228
to: 252
color: 'rgba(104, 225, 67, .75)'
- from: 252
to: 262
color: 'rgba(255, 255, 85, .75)'
- from: 262
to: 280
color: 'rgba(234, 51, 36, .75)'
borders: false
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:mini-graph-card'
entities:
- sensor.utility_voltage
unit: ''
name: Utility Voltage (24 Hr)
icon: 'mdi:transmission-tower'
show:
fill: true
legend: false
labels: false
name: true
points: false
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 24
lower_bound: 200
upper_bound: 260
decimals: 0
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#EA3324'
- value: 218
color: '#FFFF55'
- value: 228
color: '#68E143'
- value: 252
color: '#FFFF55'
- value: 262
color: '#EA3324'
- type: 'custom:mini-graph-card'
entities:
- sensor.utility_voltage
unit: ''
name: Utility Voltage (2 Weeks)
icon: 'mdi:transmission-tower'
show:
fill: true
legend: false
labels: false
name: true
points: false
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 336
lower_bound: 200
upper_bound: 260
decimals: 0
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#EA3324'
- value: 218
color: '#FFFF55'
- value: 228
color: '#68E143'
- value: 252
color: '#FFFF55'
- value: 262
color: '#EA3324'
- type: vertical-stack
title: ''
cards:
- type: 'custom:canvas-gauge-card'
card_height: 250
entity: sensor.generator_voltage
name: ''
gauge:
type: radial-gauge
title: Generator
width: 250
height: 250
minValue: 0
maxValue: 280
startAngle: 40
ticksAngle: 280
valueBox: true
units: Vac
majorTicks:
- 0
- 28
- 56
- 84
- 112
- 140
- 168
- 196
- 224
- 252
- 280
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 218
color: 'rgba(234, 51, 36, .75)'
- from: 218
to: 228
color: 'rgba(255, 255, 85, .75)'
- from: 228
to: 252
color: 'rgba(104, 225, 67, .75)'
- from: 252
to: 262
color: 'rgba(255, 255, 85, .75)'
- from: 262
to: 280
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:mini-graph-card'
entities:
- sensor.generator_voltage
unit: ''
name: Generator Voltage (24 Hr)
icon: 'mdi:flash'
show:
fill: true
legend: false
labels: false
name: true
points: false
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 24
lower_bound: 200
upper_bound: 260
decimals: 0
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#EA3324'
- value: 218
color: '#FFFF55'
- value: 228
color: '#68E143'
- value: 252
color: '#FFFF55'
- value: 262
color: '#EA3324'
- type: 'custom:mini-graph-card'
entities:
- sensor.generator_voltage
unit: ''
name: Generator Voltage (2 Weeks)
icon: 'mdi:flash'
show:
fill: true
legend: false
labels: false
name: true
points: false
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 336
lower_bound: 200
upper_bound: 260
decimals: 0
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#EA3324'
- value: 218
color: '#FFFF55'
- value: 228
color: '#68E143'
- value: 252
color: '#FFFF55'
- value: 262
color: '#EA3324'
- type: vertical-stack
title: ''
cards:
- type: 'custom:canvas-gauge-card'
card_height: 250
entity: sensor.generator_frequency
name: ''
gauge:
type: radial-gauge
title: Generator
width: 250
height: 250
minValue: 0
maxValue: 70
startAngle: 40
ticksAngle: 280
valueBox: true
units: Hz
majorTicks:
- 0
- 10
- 20
- 30
- 40
- 50
- 60
- 70
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 57
color: 'rgba(234, 51, 36, .75)'
- from: 57
to: 58.5
color: 'rgba(255, 255, 85, .75)'
- from: 58.5
to: 61.5
color: 'rgba(104, 225, 67, .75)'
- from: 61.5
to: 63
color: 'rgba(255, 255, 85, .75)'
- from: 63
to: 70
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:mini-graph-card'
entities:
- sensor.generator_frequency
unit: ''
name: Generator Frequency (24 Hr)
icon: 'mdi:sine-wave'
show:
fill: true
legend: false
labels: false
name: true
points: false
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 24
lower_bound: 55
upper_bound: 65
decimals: 1
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#EA3324'
- value: 57
color: '#FFFF55'
- value: 58.5
color: '#68E143'
- value: 61.5
color: '#FFFF55'
- value: 63
color: '#EA3324'
- type: 'custom:mini-graph-card'
entities:
- sensor.generator_frequency
unit: ''
name: Generator Frequency (2 Weeks)
icon: 'mdi:sine-wave'
show:
fill: true
legend: false
labels: false
name: true
points: false
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 336
lower_bound: 55
upper_bound: 65
decimals: 1
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#EA3324'
- value: 57
color: '#FFFF55'
- value: 58.5
color: '#68E143'
- value: 61.5
color: '#FFFF55'
- value: 63
color: '#EA3324'
- type: vertical-stack
title: ''
cards:
- type: 'custom:canvas-gauge-card'
card_height: 250
entity: sensor.tank_utility_002e001b3733373013473831
name: ''
gauge:
type: radial-gauge
title: Propane Tank
width: 250
height: 250
minValue: 0
maxValue: 100
startAngle: 40
ticksAngle: 280
valueBox: true
units: '%'
majorTicks:
- 0
- 10
- 20
- 30
- 40
- 50
- 60
- 70
- 80
- 90
- 100
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 20
color: 'rgba(234, 51, 36, .75)'
- from: 20
to: 30
color: 'rgba(255, 255, 85, .75)'
- from: 30
to: 80
color: 'rgba(104, 225, 67, .75)'
- from: 80
to: 100
color: 'rgba(172, 235, 235, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:mini-graph-card'
entities:
- sensor.tank_utility_002e001b3733373013473831
unit: ''
name: Propane (2 Weeks)
icon: 'mdi:propane-tank'
show:
fill: true
legend: false
labels: false
name: true
points: false
extrema: true
average: true
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 336
decimals: 1
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#EA3324'
- value: 20
color: '#FFFF55'
- value: 30
color: '#68E143'
- value: 80
color: '#acebeb'
- entities:
- entity: binary_sensor.ping_rpigen
- entity: binary_sensor.genmon_power_outage
secondary_info: last-changed
- entity: binary_sensor.genmon_update_available
- entity: sensor.generator_time
title: Generator
type: entities
state_color: true
interesting. I’ll give that a try. I assumed there was just a built in arrangement I was missing…
on a different note, what are you using to monitor your propane tank? Very interesting.