Thank you @Ildar_Gabdullin , that fixed the column width problem.
But I have two (hopefully now small) issues remaining:
- The column width is defined manually and it seems that this value is mandatory.
layout:
column_widths: 70% 30%
width: 220
But this results in the columns being pushed below each other depending on the amount of cards in the dashboard despite being shown correctly in editor mode.
→
- Is there a way to use % instead of px e.g. for heights?
The latter may also solve the first issue. Essentially I do not want to define the total width of the horizontal-stack, just the ratios inside it.
Current code for reference and sharing :)
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
column_widths: 70% 30%
width: 200
cards:
- type: vertical-stack
cards:
- type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
min: 4.5
max: 23
step: 0.5
hide_state: false
icon: mdi:fire
- type: custom:apexcharts-card
graph_span: 24h
experimental:
color_threshold: true
update_interval: 10 s
now:
show: false
color: red
label: Now
yaxis:
- show: false
apex_config:
grid:
show: false
chart:
height: 100px
series:
- entity: sensor.eq_3_temperature_lr
stroke_width: 2
group_by:
func: last
fill_raw: zero
color_threshold:
- value: 4.5
color: blue
- value: 16
color: yellow
- value: 18
color: orange
- value: 20
color: red
- type: vertical-stack
cards:
- type: custom:button-card
entity: climate.eq_3_living_room
name: 'Off'
show_name: true
show_icon: false
show_state: false
styles:
card:
- height: 50px
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 4.5
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 18 °C
show_name: true
show_icon: false
show_state: false
styles:
card:
- height: 50px
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 18; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 18
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 20 °C
show_name: true
show_icon: false
show_state: false
styles:
card:
- height: 50px
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 20; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 20
entity_id: climate.eq_3_living_room
)
