[FTUI3] [GELÖST] Wie Widgets stapeln in Z-Richtung?

DocCyber · 28 Dezember 2023, 17:00:42

Hallo zusammen.

Der Betreff sagt im Grunde schon alles.

Ich hätte gern im Hintergrund ein Bild, und im Vordergrund ein Badge (zum Beispiel links oben in der Bildecke).

Code Auswählen

<ftui-grid-tile row="1" col="1" height="10" width="10">
  <ftui-image src="images/pic1.jpg"></ftui-image>
  <ftui-badge text="1"></ftui-badge>
</ftui-grid-tile>

Weiß jemand, wie ich das realisieren kann?

DocCyber · 29 Dezember 2023, 17:01:29

Ich hab's jetzt selbst rausgefunden.
Auch wenn es für viele trivial sein mag, schreib ich die Lösung dennoch hier auf.

CSS-Klasse definieren (ich hab's sticker genannt)
left und top müssen angegeben sein, selbst wenn's Null ist.
class="sticker" dem Badge zuweisen.

Code Auswählen

<head>
  ...
  <style>
    .sticker {
      position: absolute;
      margin: 0.5em;
      left: 0;
      top: 0;
      z-index: 5;
    }
  </style>
  ...
</head>

<body>
  ...
  <ftui-grid-tile row="1" col="1" height="10" width="10">
    <ftui-image src="images/pic1.jpg"></ftui-image>
    <ftui-badge class="sticker" text="3"></ftui-badge>
  </ftui-grid-tile>
</body>

Du darfst diesen Dateianhang nicht ansehen.

FHEM Forum

[FTUI3] [GELÖST] Wie Widgets stapeln in Z-Richtung?

DocCyber

DocCyber