Fliegende Karte im Dashboard

Allgemein
1

Guten Morgen zusammen,

ich habe ein “Automations” Dashboard was am Handy über mehrere Seiten geht.

Es gibt hier eine “Strom Karte” welche derzeit auf Position 12. ist.

Kann ich diese irgendwie “fliegend” machen?
Also das sie immer ganz oben am Displayrand ist und beim Scrollen automatisch immer ganz “schwimmt” ?

2

Hat keiner eine “Lösung” dafür?

3

Moin,

dazu muss man das, was Du möchtest erst einmal verstehen :wink:

Was ist ein Automations Dashboard, zeig doch lieber anstatt mit weniger als 1000 Worten etwas zu beschreiben :slight_smile:

Eine Lösung habe ich nicht, aber ich würde mich mal mit Browser-Mod und Card-Mod beschäftigen.

VG
Bernd

1 „Gefällt mir“
6

Ok,
Ich versuche es anders zu beschreiben:

Ich möchte, das einer Meiner Karten (entitätenstapel) immer ganz oben sichtbar ist und bleibt, auch beim scrollen.

Also ähnlich der Bläulich-hinterlegten-Menü-Leiste.

Die bleibt auch immer ganz oben stehen.

Also das gelbe soll immer im riten bereich sein, auch wenn ich scrolle.

Screenshot_20250329_152217_Home Assistant
Screenshot_20250329_152217_Home Assistant1080×2116 141 KB

Nachtrag:
Folgender Card mod Code geht nicht.

Die voreingestellte Kartenposition bleibt fest.

Auch geht es dann nicht, wenn ich es auf Kartenposition 1 setze.

card_mod:
  style: |
    ha-card {
      background-color: #313c48;
      color: white;
      position: sticky;
      top: 0px;
      margin-top: 0px;
    }

:crayon:by HarryP: Zusammenführung Mehrfachpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

7

Moin,
was mir auf einfällt ist das du die anderen Karten in eine swipe-card packen kannst damit du die durch scrollen kannst.
Beim schnellen überfliegen der Parameter habe ich auch gesehen das man die Richtung von horizontal vertical ändern kann.

LG

9

Ich habe es hinbekommen:

    card_mod:
      style: |
        @media (min-width:100px) {
          ha-card {
            background: black;
            color: white;
            border-radius: 30px;
            position: fixed;
            top: 70px;
            max-height: 170px;
            width: calc(100% - 70%);
            z-index: 1;
          }
        }

Bzw. geht es doch noch nicht.

position: fixed;

zerreist mir die breite der Kachel

:frowning:

Eigentlich wäre:

position: sticky;

Genau das was ich brauche.
(https://www.w3schools.com/css/css_positioning.asp)

Aber das greift nicht.

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

OK: Hab es hinbekommen: :slight_smile: :slight_smile: :slight_smile:

ich habe zwei gleiche Karten an position 1 und 2 gesetzt:
in der 2. Karte habe ich dann folgenden card_mod style gesetzt:

card_mod:
  style: |
    @media (max-width: 460px) {
      ha-card {      
      background-color: #313c48;
      color: white;
      position: fixed;
      top: 65px;
      max-height: 120px;
      width: 95%;
      z-index: 1;
      }
    }
    @media (min-width: 461px) {
      ha-card {
      border: 0px;
      max-height: 0px;

      }
    }

Sicher nicht die perfekte Lösung, aber es geht.