Frank2604
(Frank Figiel)
1
Can some one help me with this? How can I bring the Mini Graph Card in this left vertical stack to fill in the same height like the left thermostat?
A fix height do not solve the problem because it is different in browser and iOS companion.
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Temperatur
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: >-
sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil
card_mod:
style: |
ha-card {
{% if states('sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil') == '0.0' %}
--card-mod-icon: mdi:valve-closed
{% elif states('sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil') > '0.0' %}
--card-mod-icon-color: green;
--card-mod-icon: mdi:valve
{% endif %}
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/heizung
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cog
- type: custom:hui-element
card_type: thermostat
entity: climate.schlafzimmer_thermostat_wand
name: ' '
show_current_as_primary: true
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Luftfeuchtigkeit
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.haus_luftfeuchtigkeit_wohnraume
- type: custom:mini-graph-card
name: null
entities:
- entity: sensor.schlafzimmer_thermostat_wand_luftfeuchtigkeit
name: Raum
color: '#307EFE'
show_fill: true
smoothing: false
upper_bound: 100
lower_bound: 0
line_color: '#307EFE'
hour24: true
points_per_hour: 0.1
hours_to_show: 240
show:
labels: false
You can just add height:232 to your mini-graph-card. It’s a standard option.
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Temperatur
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: >-
sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil
card_mod:
style: |
ha-card {
{% if states('sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil') == '0.0' %}
--card-mod-icon: mdi:valve-closed
{% elif states('sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil') > '0.0' %}
--card-mod-icon-color: green;
--card-mod-icon: mdi:valve
{% endif %}
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/heizung
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cog
- type: custom:hui-element
card_type: thermostat
entity: climate.schlafzimmer_thermostat_wand
name: ' '
show_current_as_primary: true
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Luftfeuchtigkeit
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.haus_luftfeuchtigkeit_wohnraume
- type: custom:mini-graph-card
name: null
height: 252
entities:
- entity: sensor.schlafzimmer_thermostat_wand_luftfeuchtigkeit
name: Raum
color: '#307EFE'
show_fill: true
smoothing: false
upper_bound: 100
lower_bound: 0
line_color: '#307EFE'
hour24: true
points_per_hour: 0.1
hours_to_show: 240
show:
labels: false
Frank2604
(Frank Figiel)
3
Jay, thanks for taking time to answer.
As I stated above, a fix height do not solve the problem because it is different in browser and iOS companion.
height: 232 looks perfect in the cards preview, but its different on a desktop browser
and much more different on the iOS companion app
There is a fix for that. @media, but maybe hard to apply in your example.
Frank2604
(Frank Figiel)
5
I have found a simple solution:
You have to nest horizontal stacks into the vertical stacks and not the other way around, as I did.
The horizontal stacks ensure that the cards embedded in them adopt the same height.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Themperatur
- type: custom:mushroom-title-card
title: Luftfeuchtigkeit
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: >-
sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil
card_mod:
style: |
ha-card {
{% if states('sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil') == '0.0' %}
--card-mod-icon: mdi:valve-closed
{% elif states('sensor.abstellraum_heizkreissteuerung_verteiler_schlafzimmer_fe_ventil') > '0.0' %}
--card-mod-icon-color: green;
--card-mod-icon: mdi:valve
{% endif %}
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/heizung
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cog
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.haus_luftfeuchtigkeit_wohnraume
icon: mdi:home-percent-outline
- type: horizontal-stack
cards:
- type: thermostat
entity: climate.schlafzimmer_thermostat_wand
name: ' '
- type: custom:mini-graph-card
entities:
- entity: sensor.schlafzimmer_thermostat_wand_luftfeuchtigkeit
name: Letzte 10 Tage
group: false
hours_to_show: 240
points_per_hour: 0.1
group_by: interval
animate: false
line_width: 5
line_color: '#307EFE'
decimals: 0
hour24: true
font_size: 100
font_size_header: 12
align_header: left
align_icon: left
align_state: left
lower_bound: 0
smoothing: true
show:
state: true
graph: line
fill: true
point: hover
legend: false
average: true
extrema: false
labels: false
name_adaptive_color: false
icon_adaptive_color: true
