Aktuelles Video von Simon42

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' }};
                    }

:crayon: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

1 „Gefällt mir“

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 :wink:

Danke für den Tipp. Es waren 4 Karten. Als ich die 5. Karte dann hinzugefügt habe, erschien sie dann plötzlich rechts daneben. Jetzt habe ich 6 Karten drin und davon sind 2 nach rechts eingefügt worden.

1 „Gefällt mir“