Wie bekomme ich die aktiven Geräte nach oben...

[moonsorrox]

ich habe eine Aufstellung die mir jeweils den Status von Geräten anzeigt.
Wobei es so ist das die Geräte die gerade nicht An/Ein/open sind nicht angezeigt werden, dass klappt eigentlich wunderbar...
Nur um so weniger Geräte es gegen Abend werden um so mehr rutschen die Geräte die noch aktuell sind in die Mitte der Box.

Wie bekomme ich das jetzt hin das alle aktuellen Geräte immer ganz oben sind..?

Aktuell der Code von allenGeräten:

Code Auswählen Erweitern

<!-- Gerätestatus Beleuchtung usw. -->
<li data-row="9" data-col="6" data-sizex="5" data-sizey="9" style="background-color:#3d445c">
<div class="vbox" style="width:98%; background-color:#292e3d">
<div class="hbox">
<div class="card">
<div class="vbox">
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WZ_TK_Terrasse" data-get="state" data-get-on="open" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Terrassentür - OFFEN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WZ_TK_Terrasse" data-get="state" data-on-color="crimson" data-get-on="open" data-icon="fs-fts_door_tilt"></div></div>
</div>
</div>
<!-- ==== Schlafzimmer - Fensterkontakt ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="SZ_Fenstersensor" data-get="state" data-get-on="tilted" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Schlafzimmer Fenster - Gekippt</div></div></div>
<div class="card"><div></div> <div class="large right-align" data-type="symbol" data-device="SZ_Fenstersensor" data-get="state" data-on-color="yellow" data-get-on="tilted" data-icon="oa-fts_window_1w_tilt"></div></div>
</div>
</div>
<!-- ========== Garagentor ========== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="Garagentorsensor" data-get="state" data-get-on="open" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Garagen Tor - OFFEN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="Garagentorsensor" data-get="state" data-on-color="crimson" data-get-on="open" data-icon="oa-fts_garage_door_50"></div></div>
</div>
</div>
<!-- ====== Türklingel ====== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Türklingel - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="Klingel" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="fs-ring"></div></div>
</div>
</div>
<!-- ==== LED TV - Lampe ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WZ_Lampe_TV" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">LED-TV Lampe - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WZ_Lampe_TV" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
<!-- ==== LED Schrank und Vitrine ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WZ_Schrank" data-get="state" data-get-on="ON" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">LED Schrank & Vitrine</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WZ_Schrank" data-get="state" data-on-color="crimson" data-get-on="ON" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WegLampe_Sw_01" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-5"><div><div style="text-align:left; font-size:140%">Beleuchtung Weg vorn & Schuppen</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WegLampe_Sw_01" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_wall_1"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Weg hinten ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="WegLampe_Sw_02" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Weg hinten</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="WegLampe_Sw_02" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_uplight"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Garten ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="AU_Garten" data-get="state" data-get-on="ON" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Garten</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="AU_Garten" data-get="state" data-on-color="crimson" data-get-on="ON" data-icon="oa-light_uplight"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Terrasse ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtTerrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Terrasse</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="LichtTerrasse" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_outdoor"></div></div>
</div>
</div>
<!-- ==== Beleuchtung 3x LED Eingang ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="AussenLampe" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">3x LED Eingang</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="AussenLampe" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_downlight"></div></div>
</div>
</div>
<!-- ==== Licht - OG ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="OG_Licht_Buero" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung OG Büro</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="OG_Licht_Buero" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_pendant_light"></div></div>
</div>
</div>
<!-- ==== Tablet Flur Ladestation ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="di_Ladestation_FlurOben" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-5"><div><div style="text-align:left; font-size:140%">Tablet Flur wird geladen</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="di_Ladestation_FlurOben" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-it_smartphone"></div></div>
</div>
</div>
<!-- ==== Tablet Küche Ladestation ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="di_Ladestation_Kueche" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Tablet Küche wird geladen</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="di_Ladestation_Kueche" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-it_smartphone"></div></div>
</div>
</div>
<!-- ==== Schlafzimmer Uhr ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="Uhrzeit" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Schlafzimmer Uhr - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="Uhrzeit" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-time_clock"></div></div>
</div>
</div>
<!-- ==== Gardena Pumpe ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="GardenaPumpe" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Gardena Pumpe - EIN</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="GardenaPumpe" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-sani_garden_pump"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Garage ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtGarage" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Garage</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="LichtGarage" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-fts_garage"></div></div>
</div>
</div>
<!-- ==== Beleuchtung Schlafzimmer ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtSZ" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Beleuchtung Schlafzimmer</div></div></div>
<div class="card"><div></div>
<div class="right-align" data-type="symbol" data-device="LichtSZ" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
<!-- ==== Netzwerkdrucker Büro ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="BU_Sonoff_1" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Netzwerkdrucker Büro</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="BU_Sonoff_1" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="fs-it_printer"></div></div>
</div>
</div>
<!-- ==== Proxmox - Server ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="BU_Sonoff_2" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Proxmox - Server</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="BU_Sonoff_2" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-it_server"></div></div>
</div>
</div>
<!-- ==== Licht Weihnachten Busch ==== -->
<div class="top-narrow" style="width:100%" data-type="classchanger" data-device="LichtEG" data-get="state" data-get-on="on" data-off-class="hide">
<div class="hbox">
<div class="card grow-4"><div><div style="text-align:left; font-size:140%">Licht Weihnachten Busch</div></div></div>
<div class="card"><div></div>
<div class="large right-align" data-type="symbol" data-device="LichtEG" data-get="state" data-on-color="crimson" data-get-on="on" data-icon="oa-light_led_stripe"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>

Screenshot von nur einem aktiven Gerät, die Rollläden sind immer da, also müßte das gerade angezeigte Gerät direkt darunter stehen, ist aber zentriert in der mitte der Box.

[setstate]

in einer hbox hilft items-top

Code Auswählen Erweitern

<li data-row="1" data-col="6" data-sizex="5" data-sizey="9" style="background-color:#3d445c" class="gs-w has_vbox">
<div class="vbox" style="width:98%; background-color:#292e3d">
<div class="hbox items-top">
<div class="card">
                                     ...


[moonsorrox]

Super, vielen Dank...!
Da die Zeilen Code denke ich von mir sind - sehe ich an den Farben - was hast du dort oben noch für eine class drin..?

Code Auswählen Erweitern

class="gs-w has_vbox"
finde ich bisher nirgends im Wiki

[setstate]

Nur das items-top. Alles andere wird automatisch angehangen

[moonsorrox]

ja das hat auch prima geklappt...!

ich wollte nur rein aus Interesse wissen was das dort oben im <li> für eine class ist