Symbole nebeneinander

Begonnen von Zentia92, 20 Dezember 2017, 19:54:18

Vorheriges Thema - Nächstes Thema

Zentia92

Schönen guten Abend.
Ich versuche mich aktuell mit dem TabletUI und bin gerade dabei, 2 Symbole nebeneinander statt untereinander darzustellen. Jedoch bekomme ich das einfach nicht gebacken... Hatte es schon mit "Inline" versucht jedoch ohne Erfolg.

Mein Code aktuell:     <title>FHEM F22</title>
</head>

<body>

    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
                <header>Wohnzimmer</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
<div data-type="switch" data-device="Wohnzimmerschrank"></div>
<div data-type="label" class="narrow darker">Schrank</div>
<div data-type="switch" data-device="TV_Wand"></div>
<div data-type="label" class="narrow darker">TV Wand</div>
                        </div>
                    </div>
                </div>
            </li>
<li data-row="1" data-col="2" data-sizey="2" data-sizex="1">
                <header>Lichtmodi</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
    <li data-row="1" data-col="3" data-sizey="3" data-sizex="1">
                <header>Heizung</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
<li data-row="1" data-col="4" data-sizey="4" data-sizex="1">
                <header>Wetter</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
    <li data-row="2" data-col="1" data-sizey="1" data-sizex="1">
                <header>Büro</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1">
                <header>Küche</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
<li data-row="3" data-col="2" data-sizey="1" data-sizex="1">
                <header>Bad</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
    <li data-row="4" data-col="1" data-sizey="1" data-sizex="1">
                <header>Schlafzimmer</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
<li data-row="4" data-col="2" data-sizey="1" data-sizex="1">
                <header>WC</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
<li data-row="4" data-col="3" data-sizey="1" data-sizex="1">
                <header>Terasse</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>


Nicht wunder bitte, ich hänge aktuell noch im "Wohnzimmer" fest...

Hoffe es kann mir jemand einen Rat geben.

Liebe Grüße

setstate

Eine neue cell aufmachen


<div class="sheet">
                    <div class="row">
                        <div class="cell">
<div data-type="switch" data-device="TV_Wand"></div>
<div data-type="label" class="narrow darker">TV Wand</div>
                        </div>
                        <div class="cell">
<div data-type="switch" data-device="Wohnzimmerschrank"></div>
<div data-type="label" class="narrow darker">Schrank</div>
                        </div>
                    </div>
                </div>

Zentia92

#2
Hallo und danke für deine Antwort.

Wenn ich einen neue cell aufmache, habe ich über den ganzen bildschirm 1ne große Tabelle "Wohnzimmer" mit den 2 devices drin. Wie verhindere ich das?

LG

Zentia92

Nachtrag: Habe es jetzt in eine neue cell gesteckt. Jedoch ändert sich nichts daran. Selbst wenn ich den wert "cell" durch "inline" o.ä. ersetzte... Woran liegt das?

Gunther

#4
Mach mal nen Screenshot und poste Deinen Code

Wikibeispiele hast Du gecheckt?
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden