FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: T4fk4D am 07 Juni 2016, 12:26:04

Titel: Anordnung der Symbole/Elemente in einem Widget?
Beitrag von: T4fk4D am 07 Juni 2016, 12:26:04
Hallo Zusammen,

ich bin grad dabei mir mein eigenes kleines TabletUI zu basteln.
Zunächst wollte ich die einzelnen Elemente so anordnen, dass Sie für mich sinnvoll sind.
Hierbei macht das TabletUI aber nicht ganz das, was ich erwarte.

Ich wollte zum Beispiel in einem Widget Überschriften nebeneinander haben und darunter dann die Elemente.
Dabei sollten die "Überschriften" auf einer Höhe sein, aber sie sind nicht da wo ich sie haben will.

Das siegt dann so aus wie im angehängten Bild.
Folgenden Code habe ich benutzt


<li data-row="1" data-col="2" data-sizex="6" data-sizey="2">

<header><div data-type="label" class="large orange">Light</div></header>
        <div class="col-1-5">
        <div data-type="label" class="darker medium bg-black">WoZi</div>

<div class="">
        <div data-type="switch" data-device="IntTec_1_Fhem" data-get-on="on" data-get-off="off" class="big top-space"></div>
        <div data-type="label">Sofa</div>
        </div>
     
        </div>
        <div class="col-1-5">
        <div data-type="label" class="darker medium bg-black v-align-top-text">KiZi</div>
        </div>
        <div class="col-1-5">
        <div data-type="label" class="darker medium bg-black">SchlaZi</div>
        </div>
        <div class="col-1-5">
        <div data-type="label" class="darker medium bg-black">Küche</div>
        </div>
        <div class="col-1-5">
        <div data-type="label" class="darker medium bg-black">Bad</div>
        </div>
</li


Ich hatte auch schon Versuche gestartet in den einzelnen "col-1-5" Blöcken "row-x-x" verschachtelt einzubauen um die Elemente an ihren Platz zu bringen, aber das hat auch nicht zum Ziel geführt.

Vielleicht habt ihr ja eine Idee, wo mein Denkfehler liegt.

Auf jeden Fall schonmal Danke für eure Hilfe :-)




Titel: Antw:Anordnung der Symbole/Elemente in einem Widget?
Beitrag von: n4rrOx am 07 Juni 2016, 12:56:39
Hi,

ungetestet, aber könnte so gehen. Mal diese divs ....

        <div class="col-1-5">
            [...]
        </div>

so ändern:

        <div class="col-1-5"  style="vertical-align:top">
            [...]
        </div>


Alternativ neue classe in der eigenen  .css definieren und unter "class" mit aufführen.

Gruß
Mathias
Titel: Antw:Anordnung der Symbole/Elemente in einem Widget?
Beitrag von: T4fk4D am 07 Juni 2016, 14:50:57
Perfekt, hat funktioniert :-)