FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: DocCyber am 28 Dezember 2023, 17:00:42

Titel: [FTUI3] [GELÖST] Wie Widgets stapeln in Z-Richtung?
Beitrag von: DocCyber am 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).
<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?
Titel: Aw: [FTUI3] [GELÖST] Wie Widgets stapeln in Z-Richtung?
Beitrag von: DocCyber am 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.

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

sticker.png