(ERLEDIGT) data-hide-on Frage...

[misux]

HI ich habe mir eine Fensterübersicht gebastelt die mir den Zustand des Fensters anzeigt und bei geschlossenem Fenster wird das Symbol und die Bezeichnung ausgeblendet...

Meine Frage: Wie kann ich der vbox bzw Tabelle mitteilen das die wenn das Symbol ausgeblendet ist die anderen eingeblendeten Symbole neu ausrichten soll?

Als möchte ich im Prinzip eine Reihe über das Komplette Tablet für Fensrer und TürSensoren haben und es sollen nur die Sensoren sauber zentriert ausgerichtet werden wenn sie nicht off sind. Wenn sie off sind sollen diese ausgeblendet werden und der Platz nutzbar sein.

Vielen DANK!

Code Auswählen Erweitern

   
       
<table width="100%" class="bold" style="background:black">
<tr>
<td width="100%">
<div class="hbox">
<div class="vbox">
        <div data-type="symbol" data-device="ToiletteKellerFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
        <div class="fixedlabel" data-type="label" data-hide="STATE"
data-hide-on="off" data-device="ToiletteKellerFenster" data-states='["open","closed","removed","BAT_warning"]' data-
         colors='["#00FF00","grey","red","orange"]'>Toilette</div> 
    </div>
</div>
</td>
</table>

HIer der Ganze Fenetsre und Türkontakte code:

Code Auswählen Erweitern

<header class="bold large" style="background:black;color:white;"></header>

<table width="100%" class="bold" style="background:black">
<tr>
<td width="100%">
<div class="hbox">
    <div class="vbox">
        <div data-type="symbol" data-device="KellerTuer" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_door_open","oa-fts_door","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="KellerTuer" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Keller Tür</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HeizKellerFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="HeizKellerFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 1</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HeizKellerFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="HeizKellerFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 2</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HeizKellerFenster3" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="HeizKellerFenster3" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 3</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HolzWerkstattFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="HolzWerkstattFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Holz Werk. 1</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HolzWerkstattFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="HolzWerkstattFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Holz Werk. 2</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="ELOWerkstattFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="ELOWerkstattFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>ELO Werk. 1</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="ELOWerkstattFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="ELOWerkstattFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>ELO Werk. 2</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="WaschKellerFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="WaschkellerFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Waschkeller 1</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="WaschKellerFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-type="label" data-device="WaschKellerFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Waschkeller 2</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="ToiletteKellerFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="ToiletteKellerFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Toilette</div> 
    </div>
</div>
<br>

[hsepm]

Bei mir funktioniert das anstandslos mit einer hbox.

Ich vermute, dass entweder die innere vbox das Problem ist oder der Mischmasch mit <table>.

Sorry für das weite Einrücken im Code.

Gruß,
Holger

Code Auswählen Erweitern


<li data-row="30" data-col="1" data-sizex="64" data-sizey="7" class="semitransparent">
<div class="hbox items-center">
<div>
<div data-type="symbol" class="menusize compressed left-space right-space"
data-device="OUT_SE_Eingangstuer"
data-get="STATE"
data-hide-on="zu" data-hide-off="!zu"
data-states='["auf","zu"]'
data-colors='["red","white"]'
data-background-icon=""
data-icons='["oa-fts_door_open fa-blink", "oa-fts_door"]'>
</div>
<div class="thin bigger"
data-hide-on="zu" data-hide-off="!zu"
data-type="label" data-device="OUT_SE_Eingangstuer" data-get="STATE" data-pre-text="Eingang ">
</div>
</div>
<div>
<div data-type="symbol" class="menusize compressed left-space right-space"
data-device="OUT_SE_Hintertuer"
data-get="STATE"
data-hide-on="zu" data-hide-off="!zu"
data-states='["auf","zu", "Sabotage", "Batterie"]'
data-colors='["red","white","red","yellow"]'
data-background-icon=""
data-icons='["oa-fts_door_open fa-blink", "oa-fts_door", "mi-notifications fa-blink", "fa-battery-empty fa-blink"]'>
</div>
<div class="thin bigger"
data-hide-on="zu" data-hide-off="!zu"
data-type="label" data-device="OUT_SE_Hintertuer" data-get="STATE" data-pre-text="Garten ">
</div>
</div>
...
</div>
</li>



[misux]

Hmm.. irgendwie funktioniert das in der horizontalen nicht... sobald ich "class="hbox items-center" eintrage werden die Symbole alle untereinander dargestellt und auch vernünftig ausgerichtet... wenn ich sie aber horizontal habe möchte werden diese nicht vernünftig ausgerichtet sondern nur ausgeblendet und es bleiben doofe lücken...

So hab ich es und so sieht es dann bei ausgeblendeten Symbolen aus...

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="bg-black">
<header class="bold large" style="background:black;color:white;"></header>

<!--table width="100%" class="bold" style="background:black"-->
<!--tr-->
<!--td width="100%"-->
<div class="hbox">
    <div class="vbox">
        <div data-type="symbol" data-device="KellerTuer" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_door_open","oa-fts_door","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
         data-hide="STATE"
         data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="KellerTuer" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Keller T  r</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HeizKellerFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
         data-hide="STATE"
         data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HeizKellerFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 1</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HeizKellerFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
         data-hide="STATE"
         data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HeizKellerFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 2</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="HeizKellerFenster3" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
         data-hide="STATE"
         data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HeizKellerFenster3" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 3</div>
    </div>
</div>
<br>
</li>


Wäre schon schöner wenn er die Symbole ordentlich verteilt oder alle zentriert und nicht solche lücken lässt.... ich bekomms irgendwie nicht hin...

[hsepm]

Hallo misux,

was passiert denn, wenn du statt

Code Auswählen Erweitern


<div class="vbox">


einfach nur

Code Auswählen Erweitern


<div>


verwendest, so wie ich das gemacht habe?

Also

Code Auswählen Erweitern


<div class="hbox items-center">
  <div>
    <div data-type=...></div>
    <div data-type=...></div>
  </div>
  <div>
    <div data-type=...></div>
    <div data-type=...></div>
  </div>
</div>


Das generelle Layout is dann horizontal, das innere Layout ist vertikal (Symbol + Label).

Sobald die beiden inneren div's (Symbol, Label) versteckt sind, sollte auch das umschließende div auf 0x0 pixel resized werden.

Gruß,
Holger

[misux]

  Hammerklasse! Vielen Dank für deine Hilfe! Nun geht es!!!

Nur noch eine Frage: Wie kann ich zu den Sichtbaren Symbolen den Abstand vergrösern? Die sind wenn mehrere sichtbar sind so zusammengequetcht.... siehe Bild.

Hier der Code:

Code Auswählen Erweitern

<header class="bold large" style="background:white;color:black;">Fenster- und Türsensoren</header>

<table width="100%" class="bold" style="background:black">
<tr>
<td width="100%">
<div class="hbox">

<div>   
        <div data-type="symbol" data-device="EingangsTuer" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_door_open","oa-fts_door","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="EingangsTuer" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Eingang</div>   
   </div>
<div>
        <div data-type="symbol" data-device="TerrassenTuer" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_door_open","oa-fts_door","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="TerrassenTuer" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Terrasse</div>   
       </div>
<div>
        <div data-type="symbol" data-device="BueroFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="BueroFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Büro</div>
   </div>
<div>
        <div data-type="symbol" data-device="KuecheFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="KuecheFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Küche</div>   
   </div>
<div>
        <div data-type="symbol" data-device="EssZimmerFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="EssZimmerFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Esszimmer</div>   
   </div>
<div>
        <div data-type="symbol" data-device="BadeZimmerFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="BadeZimmerFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Bad</div>   
   </div>
<div>
        <div data-type="symbol" data-device="ToilettenFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="ToilettenFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Toilette</div>   
   </div>
<div>
        <div data-type="symbol" data-device="AnkleideZimmerFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="AnkleideZimmerFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Ankleide</div>
   </div>
<div>
        <div data-type="symbol" data-device="SchlafZimmerFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="SchlafZimmerFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Schlafzimmer</div>
   </div>
<div>
        <div data-type="symbol" data-device="SpieleZimmerFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="colsed" data-device="SpieleZimmerFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Spielen 1</div>   
   </div>
<div>
        <div data-type="symbol" data-device="SpieleZimmerFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="SpieleZimmerFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Spielen 2</div>   
   </div>
<div>
        <div data-type="symbol" data-device="SpieleZimmerFenster3" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="SpieleZimmerFenster3" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Spielen 3</div>   
   </div>
<div>
        <div data-type="symbol" data-device="DominicSchlafzimmerFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="DominicSchlafzimmerFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Dominic 1</div>
   </div>
<div>
        <div data-type="symbol" data-device="DominicSchlafzimmerFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="state"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="closed" data-device="DominicSchlafzimmerFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Dominic 2</div>   
   </div>
</div>
<br>
</td>
</tr>
</table>

<!--=====================================================Fenster/Türsensoren Keller=======================================================-->

<header class="bold large" style="background:black;color:white;"></header>

<table width="100%" class="bold" style="background:black">
<tr>
<td width="100%">
<div class="hbox">
    <div>
        <div data-type="symbol" data-device="KellerTuer" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_door_open","oa-fts_door","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="KellerTuer" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Keller Tür</div>
    </div>
    <div>
        <div data-type="symbol" data-device="HeizKellerFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HeizKellerFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 1</div>
    </div>
    <div>
        <div data-type="symbol" data-device="HeizKellerFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HeizKellerFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 2</div>
    </div>
    <div>
        <div data-type="symbol" data-device="HeizKellerFenster3" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HeizKellerFenster3" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Heizkeller 3</div>
    </div>
    <div>
        <div data-type="symbol" data-device="HolzWerkstattFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HolzWerkstattFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Holz Werk. 1</div>
    </div>
    <div>
        <div data-type="symbol" data-device="HolzWerkstattFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HolzWerkstattFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Holz Werk. 2</div>
    </div>
    <div>
        <div data-type="symbol" data-device="ELOWerkstattFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="ELOWerkstattFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>ELO Werk. 1</div>
    </div>
    <div>
        <div data-type="symbol" data-device="ELOWerkstattFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="ELOWerkstattFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>ELO Werk. 2</div>
    </div>
    <div>
        <div data-type="symbol" data-device="WaschKellerFenster1" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="WaschkellerFenster1" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Waschkeller 1</div>
    </div>
    <div>
        <div data-type="symbol" data-device="WaschKellerFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="WaschKellerFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Waschkeller 2</div>
    </div>
    <div>
        <div data-type="symbol" data-device="ToiletteKellerFenster" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="ToiletteKellerFenster" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>Toilette</div> 
    </div>
</div>
<br>
</td>
</tr>
</table>


[hsepm]

Bei der hbox sind alle Einträge gleich breit. Es bleiben dir nur Maßnahmen zur Verringerung der Labelbreite (truncate..., Text, Fontgröße).

Du kannst es auch mit einem <BR> im Labeltext versuchen, dann wird umgebrochen, das Layout dadurch aber vermutlich "vertikal" zerschossen.

[misux]

Super! Danke für dem Tipp...

Habe es mit &nbsp lösen können!

So ist es hübsch:

Code Auswählen Erweitern

    <div>
        <div data-type="symbol" data-device="HolzWerkstattFenster2" class="large" data-get="state"
         data-substitution='["on","OFFEN","off","Geschlossen","dimdown","BATTERIE","dimup","SABOTAGE!"]'
         data-limits='["on","off","dimdown","dimup"]'
         data-icons='["oa-fts_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'
data-hide="STATE"
data-hide-on="off"></div>
<div class="fixedlabel" data-type="label" data-hide="STATE" data-hide-on="off" data-device="HolzWerkstattFenster2" data-states='["open","closed","removed","BAT_warning"]' data-colors='["#00FF00","grey","red","orange"]'>&nbspHolz&nbspWerk.&nbsp2&nbsp</div>
    </div>