hallo,
ich habe bei der erstellung von kacheln innerhalb der stack-in-card (vertikal) ab und zu folgendes problem. mal wird alles korrekt erstellt (beispiel 1) und manchmal nicht (beispiel 2). als hervorhebung habe ich den teil, welcher betroffen ist, rot eingekreist.
korrekte und gewünschte darstellung.
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 13px;
border: none !important;
border-radius: 33px !important;
background: rgba(255, 255, 255, 0.20);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
cards:
- type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
forecast_slots: 5
secondary_info_attribute: humidity
name: Luftfeuchtigkeit
show_current: true
show_forecast: true
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.25);
border: none;
border-radius: 30px !important;
margin: 0px;
display: flex !important;
justify-content: center !important;
text-align: !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:horizon-card
moon: true
refresh_period: 60
fields:
sunrise: true
sunset: true
dawn: true
noon: true
southern_flip: false
moon_phase_rotation: -10
language: de
time_format: 24h
number_format: 24h
time_zone: Euro/Berlin
no_card: false
debug_level: 0
grid_options:
columns: 12
rows: 3
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.25);
border: none;
border-radius: 30px !important;
margin: 0px;
display: !important;
justify-content: center !important;
text-align: center !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
der code dazu.
hier die darstellung, wie sie nicht geünscht ist, aber manchmal passiert.
type: custom:vertical-stack-in-card
cards:
- type: custom:modern-circular-gauge
entity: sensor.home_gesamt
secondary: {}
tertiary: {}
header_position: top
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.25);
border: none;
border-radius: 30px !important;
margin: 0px;
display: flex !important;
justify-content: left !important;
text-align: left !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
- type: custom:modern-circular-gauge
entity: sensor.home_gesamt
secondary: {}
tertiary: {}
header_position: top
card_mod:
style: |
ha-card {
background: rgba(255, 255, 255, 0.25);
border: none;
border-radius: 30px !important;
margin: 0px;
display: flex !important;
justify-content: left !important;
text-align: left !important;
}
#info {
font-size: 110% !important;
}
.card-content {
margin: auto !important;
}
card_mod:
style: |
ha-card {
padding: 13px;
border: none !important;
border-radius: 33px !important;
background: rgba(255, 255, 255, 0.20);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
}
grid_options:
columns: 6
rows: 8
hier der code zu diesem beispiel.
die beiden beispiele wurde in der gleichen reihenfolge und muster erstellt. es ist auch schon vorgekommen, das beispiel 1 wie beispiel 2 ausgesehen hat. ist bei mir aber derzeitig nur bei der vertikalen erstellung passiert. ber der horizontalen noch nicht.
das ganze passiert auch ohne die speziellen card-mod sachen.
hat vielleicht jemand gleiches problem und eine lösung gefunden?
. danke dafür.