Hi,
For my smart switches and tablets interfaces, I use stack-in-cards a lot to display buttons or information without any margin.
Until a while ago it worked fine, but since an update to Home Assistant a few weeks ago, margins have appeared and I can’t seem to remove them.
I’ll take as an example the interface on one of my smart switches, which has in-line On/Off/Auto buttons on the right and in-line Air/Water/pH/RedOX info at the bottom.
Here it is before the update:
And after the update:
This is exactly the same code at the same time taken from my production HA (with the current update) and my testing HA (which hadn’t been updated since January).
However, I can’t remember the version number of my testing HA because to test it I updated it and it added the margins to the test version without any change to the code.
Here is the code:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
name: Air
hour24: true
smoothing: true
decimals: 1
font_size: 72
animate: true
show:
labels: false
points: false
legend: false
fill: fade
entities:
- entity: sensor.thermometre_plage_temperature
color: orange
card_mod:
style: |
ha-card {
border-right: 1px solid var(--ha-card-border-color) !important;
}
- type: custom:mini-graph-card
name: Eau
icon: mdi:water
hour24: true
smoothing: true
decimals: 1
font_size: 72
animate: true
show:
labels: false
points: false
legend: false
fill: fade
entities:
- entity: sensor.sonde_piscine_temperature
card_mod:
style: |
ha-card {
border-right: 1px solid var(--ha-card-border-color) !important;
}
- type: custom:mini-graph-card
name: pH
icon: mdi:test-tube
hour24: true
smoothing: true
decimals: 1
font_size: 72
animate: true
show:
labels: false
points: false
legend: false
fill: fade
entities:
- entity: sensor.oklyn_ph
color: green
lower_bound: 5
upper_bound: 8
card_mod:
style: |
ha-card {
border-right: 1px solid var(--ha-card-border-color) !important;
}
- type: custom:mini-graph-card
name: RedOx
icon: mdi:bacteria
hour24: true
smoothing: true
decimals: 1
font_size: 72
animate: true
show:
labels: false
points: false
legend: false
fill: fade
lower_bound: 50
upper_bound: 800
entities:
- entity: sensor.oklyn_redox
color: violet
Same thing here. Before the update it was like that:
Now it is like that:
In fact, I remember that I obtained this by wrapping my code by a custom:vertical-stack-in-card even if it has only one card. But as of today it is not effective anymore…
Do you know how I can get this back, i.e. a stack in without any margin? I’ve tried margin: 0px, but it doesn’t work…