FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Zentia92 am 20 Dezember 2017, 19:54:18

Titel: Symbole nebeneinander
Beitrag von: Zentia92 am 20 Dezember 2017, 19:54:18
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
Titel: Antw:Symbole nebeneinander
Beitrag von: setstate am 21 Dezember 2017, 06:37:45
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>
Titel: Antw:Symbole nebeneinander
Beitrag von: Zentia92 am 21 Dezember 2017, 11:56:34
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
Titel: Antw:Symbole nebeneinander
Beitrag von: Zentia92 am 21 Dezember 2017, 17:49:31
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?
Titel: Antw:Symbole nebeneinander
Beitrag von: Gunther am 21 Dezember 2017, 21:30:49
Mach mal nen Screenshot und poste Deinen Code

Wikibeispiele hast Du gecheckt?