ich versuche, eine ~HTMLBox-Kachel zu erstellen, die einen randlosen Video-Hintergrund anzeigt (edge-to-edge). Leider stoße ich an die Grenzen des WebFront-Stylings und hoffe auf einen Tipp von euch.
Ziel:
Der Inhalt der HTMLBox (ein <div> mit einem <video>) soll den Kachel-Container komplett ausfüllen und den Standard-Rahmen bzw. das Padding überdecken.
Problem:
Die üblichen CSS-Tricks, um aus einem Container „auszubrechen“, scheitern an der Kachel-Struktur des WebFronts:
position: absolute mit negativem margin:
Führt sofort zu Scrollbalken auf dem übergeordneten Container, da das Element größer wird als der zugewiesene Platz.
transform: scale(1.x):
Skaliert zwar den Inhalt, dieser wird aber vom Kachel-Container (der offenbar overflow: hidden gesetzt hat) sauber abgeschnitten. Der Rahmen bleibt sichtbar.
Ich bin auf Symcon 8.x unterwegs.
Meine Frage an die Community:
Gibt es einen bekannten CSS-Trick, den ich übersehen habe, um die overflow-Eigenschaft des Kachel-Containers zu umgehen oder eine vollflächige Darstellung zu erzwingen? Oder ist das mit einer ~HTMLBox-Variable schlicht nicht möglich?
Ergänzung:
Mit dem neuen Anzeigentyp HTML Inhalt gibt es den Schalter „Ränder entfernen“, damit kommt man der Sache näher. Lediglich oben beim Titel ist jetzt noch ein weißer Balken.
Mit der Darstellung kommst du nicht unter den Titel. Das soll verhindern, dass man sich aus Versehen blockiert oder nicht nutzbare Kacheln konfiguriert. Im Entwickler-Land sieht das aber anders aus, da gelten diese Restriktionen nicht. Sprich: Ein PHP-Modul mit HTML-Darstellung kann unter den Titel kommen.
Ansonsten kannst du das Video alternativ auch als GIF erstellen und dann als Medienobjekt einbinden. Das wäre dann auch als Vollbild unter der Kachel sichtbar.
Ansonsten kannst du das Video alternativ auch als GIF erstellen und dann als Medienobjekt einbinden. Das wäre dann auch als Vollbild unter der Kachel sichtbar.
Aber doch nur wenn es eine Kategorie wäre, das kann ich doch nicht unter eine HTML Kachel packen, oder?
Ich dachte die HTML-Kachel wäre nur ein Weg um ein Video anzuzeigen. Wenn dem so ist, dann kannst du die halt einfach weglassen und stattdessen das Medienobjekt verwenden. Wenn du eine HTML-Kachel mit vollflächigem Hintergrund haben möchtest, dann ist das aktuell nur als Modul möglich.
Ich nutze einen pi. Zum kopieren der Mediafiles (Videos oder Bilder) hole ich mir den Webserver Path wie folgt: $destinationPath = IPS_GetKernelDir() . 'user/';
Funktioniert das auch bei anderen Betriebssystemen?
