(GELÖST)Abstände festlegen?

[misux]

Könnte vielleicht mir noch jemand einen Tipp geben ob bzw. wie man die Abstände vergrösern/anpassen kann?

Im Moment dind die Abstände je nach dem wie lang das Wort ist. somit sind die ABstände unterschiedlich und nicht schön nebeneinander "ausgerichtet".

Würde mich über einen Tipp sehr freuen...

HIer der Code den ich verwende....

Code Auswählen Erweitern

<div class="top-space inline">

    <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_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
     data-colors='["#00FF00","grey","orange","#FF0000"]'></div>
<div data-type="label" class="" style=color:#aa6900 !important">Eingang</div>   
</div>
<div class="top-space inline">

    <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"]'></div>
<div data-type="label" class="" style=color:#aa6900 !important">Büro</div>
</div>
<div class="top-space inline">

    <div data-type="symbol" data-device="KuechenFenster" 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"]'></div>
<div data-type="label" class="" style=color:#aa6900 !important">Küche</div>
</div>
<div class="top-space inline">

    <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"]'></div>
<div data-type="label" class="" style=color:#aa6900 !important">Esszimmer</div>
</div>

[setstate]

Code Auswählen Erweitern


<div class="hbox items-space-between">
    <div class="vbox">
        <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_window_1w_open","oa-fts_window_1w","oa-measure_battery_25","fa-bolt"]'
         data-colors='["#00FF00","grey","orange","#FF0000"]'></div>
        <div class="orange" >Eingang</div>   
    </div>
    <div class="vbox">
        <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"]'></div>
        <div class="orange" >Büro</div>
    </div>
    <div class="vbox">
        <div data-type="symbol" data-device="KuechenFenster" 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"]'></div>
        <div class="orange" >Küche</div>
    </div>
    <div class="vbox">
        <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"]'></div>
        <div class="orange" >Essbreitbreitbreitzimmer</div>
    </div>
</div>


[misux]

Hammerklasse!!! Vielen Dank dafür!!!

[abc2006]

Hi, darf ich mich hier mal ranhängen? Ich hab ein ähnliches Problem, allerdings hätte ich die Werte gerne untereinander angeordnet:

Code Auswählen Erweitern


    <li data-row="4" data-col="3" data-sizex="1" data-sizey="1">ROW 4 | COL 3 | X 1 | Y 1
            <div class="vbox items-space-between">
                  <div class="hbox">
                        <div>VL:</div>
                        <div data-type="label"
                                data-device="RE_TEMP_HV_VL2"
                                data-get="temperature"
                                data-unit="&deg;C"
                                data-limits='[0,40,80,87]'
                                data-colors='["blue","yellow","green","red"]'
                                data-fix='2'
                                class="bigger">
                        </div>
                  </div>
                 <div class="hbox">

                         <div> RLA:</div>
                         <div data-type="label"
                                data-device="RE_TEMP_HV_RLA2"
                                data-get="temperature"
                                data-unit="&deg;C"
                                data-limits='[0,60,70]'
                                data-colors='["blue","green","red"]'
                                data-fix='2'
                                class="bigger">
                        </div>
                </div>
                <div class="hbox">
                        <div class="bigger"> RL:</div>
                        <div data-type="label"
                                 data-device="RE_TEMP_HV_RL"
                                 data-get="temperature"
                                 data-unit="&deg;C"
                                 data-limits='[0,30,50]'
                                 data-colors='["green","orange","red"]'
                                 data-fix='2'
                                 class="bigger">
                        </div>
                </div>
                <div class="hbox">
                        <div class="bigger"> BRT:</div>
                        <div data-type="label"
                                 data-device="RE_TEMP_BRT"
                                 data-get="temperature"
                                 data-unit="&deg;C"
                                 data-limits='[0,650,700]'
                                 data-colors='["blue","#00BFFF","green"]'
                                 data-fix='2'
                                 class="bigger">
                        </div>
                </div>
                <div class="hbox">
                        <div class="bigger"> P:</div>
                        <div data-type="label"
                                 data-device="KNX10.I05_Zaehler_Holzvergaser"
                                 data-get="power"
                                 data-limits='[-5000,0,40000]'
                                 data-colors='["red","yellow","green"]'
                                 data-fix='2'
                                 class="bigger">
                        </div>
                </div>
        </div>


Habe das Beispiel oben abgetippt. Werte werden auch untereinander angezeigt. 100% perfekt wäre es, wenn Doppelpunkte und Kommas  (die Werte bestehen aus "55.38") untereinander angezeigt werden (das BRT kann Werte bis 1000°C erreichen und somit eine Stelle vor dem Komma mehr als die anderen Thermometer)
Danach habe ich die vbox durch hbox ersetzt. Die Werte stehen auch untereinander, aber leider nicht ausgerichtet.

Frage: Hilfe zur Selbsthilfe: Wo finde ich die verfügbaren Klassen dokumentiert?
Hab da noch so ein paar Probleme, die ich dann vielleicht auch selbst lösen könnte ...

Grüße,
Stephan