On our dashboard we use a fair amount of conditional cards to show/hide status’ of things at a glance.
That works fine, but when inactive cards are hidden the conditional card still leaves behind formatted padding which creates gaps in the dashboard.
Is there a way to hide these properly so that the formatting remains true?
I’ve seen a few entries in GitHub about this, but they’re all closed due to inactivity on them. Perhaps there’s a workaround to fix it?
e.g.
Formatting with conditionals hidden:
What’s under the hood:
Example conditional card (forcing left padding):
type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.proxmox1_cpu
state: unavailable
card:
type: custom:button-card
name: Proxmox Offline
styles:
grid:
- position: relative
- position: absolute
- font-weight: bold
- font-size: 26px
- color: '#ccc'
card_mod:
style: |
ha-card {
box-shadow: none;
background: rgba(120,40,20,1);
text-align: center;
margin: 0px 0px 0px 0px;
}
- type: conditional
conditions:
- condition: state
entity: sensor.proxmox1_cpu
state_not: unavailable
card:
type: horizontal-stack
cards:
- type: gauge
entity: sensor.proxmox1_cpu
min: 0
max: 100
severity:
green: 0
yellow: 40
red: 75
needle: false
name: Prox1 CPU
- type: gauge
entity: sensor.proxmox1_cpu_temp
min: 0
max: 100
severity:
green: 15
yellow: 51
red: 65
needle: false
name: Prox1 Temp
- type: gauge
entity: sensor.proxmox1_ram
min: 0
max: 100
severity:
green: 0
yellow: 90
red: 95
needle: false
name: Prox1 RAM
2 posts - 2 participants
