Hey Guys,
I created my own chips with Button Card.
This should only be displayed with conditions when a certain state is reached.
All of this is housed in a horizontal stack!
So far so good!
But the conditional card itself seems to take up more space than if it was just a simple chip. So it looks like the picture.
If I create all this without the conditional card, the buttons are lined up correctly one after the other.
Any ideas what I can do?
type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:door-closed-lock
name: Türe
entity: lock.hausture
layout: vertical
styles:
card:
- border-radius: 50%
- background: "#BBF247"
- padding: 10px
- display: flex
- flex-direction: column
- align-items: center
- justify-content: center
- width: 70px
- height: 70px
icon:
- width: 30px
- color: "#171D22"
name:
- font-size: 12px
- font-weight: bold
- color: "#171D22"
- margin-top: 2px
- white-space: nowrap
- text-align: center
- type: custom:button-card
icon: mdi:shield
name: Alarm
layout: vertical
show_name: false
styles:
card:
- border-radius: 50%
- background: "#BBF247"
- padding: 10px
- display: flex
- flex-direction: column
- align-items: center
- justify-content: center
- width: 60px
- height: 60px
icon:
- width: 30px
- color: "#171D22"
name:
- font-size: 12px
- font-weight: bold
- color: "#171D22"
- margin-top: 2px
- white-space: nowrap
- text-align: center
- type: conditional
conditions:
- condition: state
entity: switch.keller
state: "on"
card:
type: custom:button-card
icon: mdi:washing-machine
name: Waschmaschine
entity: switch.keller
layout: vertical
show_name: false
styles:
card:
- border-radius: 50%
- background: "#BBF247"
- padding: 10px
- display: flex
- flex-direction: column
- align-items: center
- justify-content: center
- width: 60px
- height: 60px
icon:
- width: 30px
- color: "#171D22"
- animation: shake 0.4s infinite ease-in-out
name:
- font-size: 12px
- font-weight: bold
- color: "#171D22"
- margin-top: 2px
- white-space: nowrap
- text-align: center
card_mod:
style: |
@keyframes shake {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
- type: conditional
conditions:
- condition: numeric_state
above: 3
entity: sensor.shellyplusplugs_b0b21c1aa8f0_switch_0_power
card:
type: custom:button-card
icon: mdi:dishwasher
name: Spülmaschine
entity: sensor.geschirrspuler_betriebszustand
layout: vertical
show_name: false
styles:
card:
- border-radius: 50%
- background: "#BBF247"
- padding: 10px
- display: flex
- flex-direction: column
- align-items: center
- justify-content: center
- width: 60px
- height: 60px
icon:
- width: 30px
- color: "#171D22"
- animation: shake 0.4s infinite ease-in-out
name:
- font-size: 12px
- font-weight: bold
- color: "#171D22"
- margin-top: 2px
- white-space: nowrap
- text-align: center
card_mod:
style: |
@keyframes shake {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
- type: conditional
conditions:
- condition: numeric_state
above: 0
entity: sensor.anzahl_geoeffneter_fenster
card:
type: custom:button-card
icon: mdi:window-open-variant
entity: sensor.anzahl_geoeffneter_fenster
layout: vertical
show_name: false
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: navigate
navigation_path: "#fenster"
custom_fields:
badge: |
[[[
let fensterWert = states['sensor.anzahl_geoeffneter_fenster'].state;
if (fensterWert > 0) {
return fensterWert; // Zeigt die reine Zahl an!
} else {
return ``;
}
]]]
styles:
card:
- border-radius: 50%
- background: "#BBF247"
- display: flex
- flex-direction: column
- align-items: center
- justify-content: center
- width: 60px
- height: 60px
- position: relative
- overflow: visible
icon:
- width: 30px
- color: "#171D22"
custom_fields:
badge:
- position: absolute
- top: "-8px"
- right: "-8px"
- font-size: 12px
- font-weight: bold
- color: "#FFFFFF"
- width: 24px
- height: 24px
- display: flex
- align-items: center
- justify-content: center
- border-radius: 50%
- background-color: "#171D22"
- border: 2px solid white
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3)
- type: conditional
conditions:
- condition: numeric_state
above: 0
entity: sensor.anzahl_eingeschalteter_lichter
card:
type: custom:button-card
icon: mdi:lightbulb-group
entity: sensor.anzahl_eingeschalteter_lichter
layout: vertical
show_name: false
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: navigate
navigation_path: "#lichter"
custom_fields:
badge: |
[[[
let fensterWert = states['sensor.anzahl_eingeschalteter_lichter'].state;
if (fensterWert > 0) {
return fensterWert; // Zeigt die reine Zahl an!
} else {
return ``;
}
]]]
styles:
card:
- border-radius: 50%
- background: "#BBF247"
- padding: 10px
- display: flex
- flex-direction: column
- align-items: center
- justify-content: center
- width: 60px
- height: 60px
- position: relative
- overflow: visible
icon:
- width: 30px
- color: "#171D22"
custom_fields:
badge:
- position: absolute
- top: "-8px"
- right: "-8px"
- font-size: 12px
- font-weight: bold
- color: "#FFFFFF"
- width: 24px
- height: 24px
- display: flex
- align-items: center
- justify-content: center
- border-radius: 50%
- background-color: "#171D22"
- border: 2px solid white
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3)
