Symbole nebeneinander

[wolfram]

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.

Code Auswählen Erweitern

<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

[Vaddi]

Versuch mal folgendes

Code Auswählen Erweitern

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

[wolfram]

Danke Vaddi,

leider ist es das gleiche Ergebnis.

Liebe Grüße
wolf

[Thorsten Pferdekaemper]

Hi,
hast Du schon mal FUIP ausprobiert?
https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Gruß,
   Thorsten

[setstate]

- 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

[wolfram]

Danke setstate, so klappt es, gut erklärt !!! - Wiki hatte ich an dieser Stelle leider nicht verstanden.


Gesendet von iPhone mit Tapatalk Pro

[curt]

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.