Liebe Community,
ich versuche seit 2 Tagen eine Lösung für mein "Problem" zu finden. Ziel ist es in einem Gritster Element 6 Widgets gleichmäßig zu verteilen. 2 Zeilen mit jeweils 3 Widgets. In der 1. Zeile klappt das auch wunderbar. In der zweiten Zeile breche ich mir einen ab.
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<header>BAD</header>
<div data-type="label" data-device="HUE_temp_Bad" data-fix='1' class="bigger inline" data-limits='[10,23,25]' data-colors='["#00bfff","#6699FF","#FF0000"]' data-unit=" %B0C%0A"></div>
<div data-type="symbol" data-device="F_BA_1" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
<div data-type="symbol" data-device="F_BA_2" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
<div data-type="switch" data-device="Sonos_Bad" data-get='state' data-get-on='Play' data-get-off='Pause' data-states="PLAYING, PAUSED_PLAYBACK" class="small" data-icon="fa-play, fa-stop"></div>
<div data-type="image" data-device="Sonos_Bad" data-get="currentAlbumArtURL" data-size="15%" class="inline"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="transportState" class="inline"></div>
</li>>
Das Ergebnis sieht wie folgt aus (siehe Anlage).
Eigentlich möchte ich nur, dass die Elemente "switch", "image" und "label" sauber nebeneinander stehen, wie in der 1. Zeile.
Kann mir bitte jemand auf die Sprünge helfen, wo mein Denkfehler ist?
vielen Dank
wolf
Versuch mal folgendes
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<header>BAD</header>
<div data-type="label" data-device="HUE_temp_Bad" data-fix='1' class="bigger inline" data-limits='[10,23,25]' data-colors='["#00bfff","#6699FF","#FF0000"]' data-unit=" %B0C%0A"></div>
<div data-type="symbol" data-device="F_BA_1" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
<div data-type="symbol" data-device="F_BA_2" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
<div class="cell">
<div class="inline">
<div data-type="switch" data-device="Sonos_Bad" data-get='state' data-get-on='Play' data-get-off='Pause' data-states="PLAYING, PAUSED_PLAYBACK" class="small" data-icon="fa-play, fa-stop"></div>
</div>
<div class="inline">
<div data-type="image" data-device="Sonos_Bad" data-get="currentAlbumArtURL" data-size="15%"></div>
</div>
<div class="inline">
<div data-type="label" data-device="Sonos_Bad" data-get="transportState"></div>
</div></div>
</li>
Danke Vaddi,
leider ist es das gleiche Ergebnis.
Liebe Grüße
wolf
Hi,
hast Du schon mal FUIP ausprobiert?
https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Gruß,
Thorsten
- alle 'inline' raus schmeißen.
- alle Widgets, die neben einander sein sollen, mit <div class="hbox"> </div> umklammern
- alles was untereinander sein soll, mit <div class="vbox"> </div>
2 Zeilen a 3 Widgets sehen grob so aus:
vbox
hbox
switch
switch
switch
hbox
label
label
label
Das Ganze ist hier gut erklärt: https://wiki.fhem.de/wiki/FTUI_Layout_Flex
Danke setstate, so klappt es, gut erklärt !!! - Wiki hatte ich an dieser Stelle leider nicht verstanden.
Gesendet von iPhone mit Tapatalk Pro
Zitat von: setstate am 12 Oktober 2018, 11:05:37
2 Zeilen a 3 Widgets sehen grob so aus:
Möglicherweise ist das auch die Antwort auf die öfter gestellte (und unbeantwortete) Frage, wie man mehrere automatisch auftauchende Warn-Icons bei UWZ (Unwetterzentrale) nebeneinander zwingt.
Da ich derzeit nur eine Warnmeldung (Waldbrandwarn) habe, kann ich aber noch nicht zuverlässig sagen, ob Dein Vorschlag dort auch funktioniert.
Nein - leider doch nicht. War ein schöner Traum.