Ich habe heute mal versucht, sein Dashboard nachzubauen, welches er am 29.11.2023 auf YouTube hochgeladen hat. Aber leider scheitert es schon an der Ansicht. Bei mir wird, wie man auf dem Bild sieht, untereinander gepackt. Obwohl ich die gleiche Ansicht eingestellt habe, wie bei der Demo-Karte. Gibt es da irgendeinen Trick, den ich übersehen habe? Meinen RAW-Code kann ich auch gerne zur Verfügung stellen.
Sieht aus, als würdest du dir das auf dem Smartphone anschauen oder ist da s die PC Ansicht?
Das ist ein Screenshot vom Laptop.
Ist das denn die Rasteransicht?
Und in dieser Rasteransicht hast du dann Vertikale Karten angelegt, wo du dann mit horizontalen Karten drin arbeitest?
Ja, genau. Ich könnte auch den Raw-Code teilen. Wenn das hilft.
Nachtrag:
views:
- title: Wohnung
icon: mdi:floor-plan
badges: []
cards:
- type: vertical-stack
title: Abstellkammer
cards:
- type: horizontal-stack
cards:
- type: tile
entity: light.abstellkammer
show_entity_picture: false
vertical: false
hide_state: true
name: Licht
color: grey
icon_tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('light.abstellkammer', 'on') else 'black' }};
}
- type: vertical-stack
title: Badezimmer
cards:
- type: horizontal-stack
cards:
- type: tile
entity: climate.heizung_bad
show_entity_picture: false
vertical: false
hide_state: true
name: Heizung
color: grey
icon: mdi:radiator
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('climate.heizung_bad', 'on') else 'black' }};
}
- type: vertical-stack
title: Diele
cards:
- type: horizontal-stack
cards:
- type: tile
entity: light.diele
show_entity_picture: false
vertical: false
hide_state: true
name: Licht
color: grey
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('light.diele', 'on') else 'black' }};
}
- type: tile
entity: lock.nuki_wohnung_2_lock
name: Wohnungstür
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('lock.nuki_wohnung_2_lock', 'unlocked') else 'black' }};
}
- type: horizontal-stack
cards:
- type: tile
entity: climate.heizung_diele
state_content:
- state
- current_temperature
- temperature
- battery_level
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('climate.heizung_diele', 'on') else 'black' }};
}
- type: vertical-stack
title: Küche
cards:
- type: horizontal-stack
cards:
- type: tile
entity: light.kuche
show_entity_picture: false
vertical: false
hide_state: true
name: Licht
color: grey
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('light.kuche', 'on') else 'black' }};
}
- type: horizontal-stack
cards:
- type: tile
entity: light.herd
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('light.herd', 'on') else 'black' }};
}
- type: tile
entity: light.kuhlschrank
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('light.kuhlschrank', 'on') else 'black' }};
}
- type: tile
entity: light.spule
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('light.spule', 'on') else 'black' }};
}
- type: horizontal-stack
cards:
- type: tile
entity: switch.backofen
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('switch.backofen', 'on') else 'black' }};
}
- type: tile
entity: switch.geschirr_spulmaschine
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('switch.geschirr_spulmaschine', 'on') else 'black' }};
}
- type: tile
entity: switch.kaffeemaschine
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('switch.kaffeemaschine', 'on') else 'black' }};
}
- type: horizontal-stack
cards:
- type: tile
entity: switch.kuhlschrank_verbrauch
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('switch.kuhlschrank_verbrauch', 'on') else 'black' }};
}
- type: tile
entity: switch.mikrowelle
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('switch.mikrowelle', 'on') else 'black' }};
}
- type: tile
entity: switch.untertisch_gerat
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('switch.untertisch_gerat', 'on') else 'black' }};
}
- type: horizontal-stack
cards:
- type: tile
entity: switch.waschmaschine
color: grey
hide_state: true
card_mod:
style: |
ha-card {
background-color: {{ 'darkred' if is_state('switch.waschmaschine', 'on') else 'black' }};
}
by HarryP: Zusammenführung Doppelpost
Wie groß ist der Laptop, welche Auflösung und arbeitest du mit maxiertem Browserfenster?
Es ist ein 15"-Laptop und ich arbeite nicht im maximieren Browser-Modus. Auflösung ist, glaube ich 1920 x ? kann ich leider gerade nicht nachschauen.
Je nach dem wie groß / klein du das Browser Fenster ziehst, ändert sich die Ansicht responsive.
Ich habe es heute mal geschafft nachzuschauen. Mein Laptop hat einen 14" Bildschirm. Das Browser-Fenster ist maximiert (Nicht im Vollbildmodus) und die Auflösung beträgt 1920 x 1080 mit einer Skalierung von 150%
Hast du einen Zoom im Browser eingestellt? Drück mal STRG+0 (null) oder STRG± (minus).
Nein, habe ich nicht. Der steht immer auf 100%
Verringere trotzdem mal den Zoom um zu schauen ob er irgendwann umspringt
Ich habe den Zoom im Browser von 25% - 500% durchgetestet. Leider ist nichts passiert.
Ich sehe gerade, dass du nur 5 Karten drin hast. Leg mal eine 6. Karte an und schau was passiert ![]()


