Hallo zusammen,
mal wieder die beliebte Custom Button Card, bei der viel geht,
ich es aber nicht hinbekomme.
Ich möchte die Anzeige der Müllabholung (Waste Collection Schedule)
etwas aufhübschen.
Bisher so:
Soll es nun so aussehen bzw. sieht es aus:
Ich hätte aber gerne bei “in x tagen (Datum)” einen Zeilenumbruch.
Mit der Breite habe ich rumgespielt, ebenso mit word-break: break-word
Nur wenn ich die Textgröße extrem zurücknehme, sehe ich auch das Datum.
Dann kann ich aber nix mehr lesen 
Exemplarisch für den gelben Sack wird der Sensor so aufgebaut:
# Nächste gelber-Sack Abholung in Tagen
- platform: waste_collection_schedule
name: "Gelber Sack"
details_format: "upcoming"
value_template: '{% if value.daysTo == 0 %} Heute{% elif value.daysTo == 1 %} Morgen{% else %} in {{value.daysTo}} tagen ( {{value.date.strftime("%d.%m.%Y")}} ){% endif %}'
types:
- Gelber Sack
Der Code der gesamten Karte:
type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: picture-elements
image: /local/muell/Back_trans.png
elements:
- type: custom:button-card
entity: sensor.nachste_abholung
show_icon: false
show_name: true
show_state: true
style:
top: 10%
left: 50%
width: 100%
styles:
state:
- font-size: 1.0vw
- font-family: Arial Rounded MT
- white-space: unset
- text-overflow: unset
card:
- background: transparent
- border: none
- type: image
entity: sensor.gelber_sack
image: /local/muell/Kunststoff.png
style:
pointer-events: none
left: 15%
top: 45%
width: 15%
- type: image
entity: sensor.papiertonne
image: /local/muell/Papier.png
style:
pointer-events: none
left: 38%
top: 45%
width: 15%
- type: image
entity: sensor.biotonne
image: /local/muell/Bio.png
style:
pointer-events: none
left: 61%
top: 45%
width: 15%
- type: image
entity: sensor.restmulltonne
image: /local/muell/Rest.png
style:
pointer-events: none
left: 84%
top: 45%
width: 15%
- type: custom:button-card
entity: sensor.gelber_sack
show_name: true
show_icon: false
show_state: true
style:
top: 85%
left: 15%
width: 25%
styles:
name:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- color: yellow
state:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- padding-top: 0.3em
- color: yellow
card:
- background-color: transparent
- border: none
- type: custom:button-card
entity: sensor.papiertonne
show_name: true
show_icon: false
show_state: true
style:
top: 85%
left: 38%
width: 25%
styles:
name:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- color: lightblue
state:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- padding-top: 0.3em
- word-brak: break-word
- color: lightblue
card:
- background-color: transparent
- border: none
- type: custom:button-card
entity: sensor.biotonne
show_name: true
show_icon: false
show_state: true
style:
top: 85%
left: 61%
width: 25%
styles:
name:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- color: brown
state:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- padding-top: 0.3em
card:
- background-color: transparent
- border: none
- color: brown
- type: custom:button-card
entity: sensor.restmulltonne
show_name: true
show_icon: false
show_state: true
style:
top: 85%
left: 84%
width: 25%
styles:
name:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- color: grey
state:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- padding-top: 0.3em
- color: grey
columns: 1
Habe mir auch die Doku zur CBC angesehen, krieg es aber nicht auf die Reihe…
Wo muss ich ansetzen/hinlangen?
Edit:
Ich habe nun - white-space: normal ergänzt:
- type: custom:button-card
entity: sensor.gelber_sack
show_name: true
show_icon: false
show_state: true
style:
top: 85%
left: 15%
width: 25%
styles:
name:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- color: yellow
state:
- font-size: 0.8vw
- font-family: Arial Rounded MT
- padding-top: 0.3em
- color: yellow
- white-space: normal
card:
- background-color: transparent
- border: none
Nun schaut es so aus:
Schon nah dran, aber die öffnende Klammer muss noch runter… 