FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: misux am 12 März 2018, 11:49:42

Titel: (GELÖST)Abstände festlegen?
Beitrag von: misux am 12 März 2018, 11:49:42
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....

<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>
Titel: Antw:Abstände festlegen?
Beitrag von: setstate am 14 März 2018, 00:40:51

<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>
Titel: Antw:Abstände festlegen?
Beitrag von: misux am 14 März 2018, 09:11:07
Hammerklasse!!! Vielen Dank dafür!!! :D
Titel: Antw:(GELÖST)Abstände festlegen?
Beitrag von: abc2006 am 15 März 2018, 13:29:09
Hi, darf ich mich hier mal ranhängen? Ich hab ein ähnliches Problem, allerdings hätte ich die Werte gerne untereinander angeordnet:


    <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