FTUI 2.5 - Sheet > Row > Cell

[moonsorrox]

Ich habe schon fast verzweifelt und dachte ich bin zu doof zu begreifen..... Aber gut wenn man die ganzen class nicht kennt 

Ich hatte mir schon einige Seiten auf dem System aufgebaut und finde es schon sehr gut zu händeln, wenn man das überall gut hinbekommt und dann kommt dieses "blöde" circle dazwischen und ich war gefrustet...

[setstate]

Jetzt sollte Circlemenu auch passen

[moonsorrox]

auf dem Screenshot, das Wort "Position" im Circlemenü von vorhin klebt immer noch links an der Seite, setze ich dort ein anderes Icon ohne Circlemenü hin geht das wunderbar, also irgend etwas ist da noch nicht richtig.

Oder was muss ich in der class definieren.?

[moonsorrox]

nun habe ich noch eine Frage zu meiner Wetter Seite, die ich grad letzte Woche fertig hatte, da ist jetzt einiges im argen.
Soll ich die komplett neu aufbauen mit Sheet > Row > Cell oder bekomme ich die so wieder hin, denn es hat sich einiges verschoben.
Der header ist komplett weg, und der Rest ist nach oben und unten verschoben, man sieht unten die Werte nicht mehr.

Aber eben bevor ich anfange frage ich lieber. (sieh Screenshot)
Code:

Code Auswählen Erweitern

<!-- ========= Wettervorhersage =========== -->
<!-- ====================================== -->
<li data-row="3" data-col="3" data-sizex="8" data-sizey="4" class="semitransparent3d">
<div class="container weather">
<header>Wetter in <div data-type="label"
   data-device="MeinWetter"
   data-get="city"
   style="display:inline"></div>
</header>

<table border="0px" width="100%">       
  <tr>
    <td class="container weather"><div data-type="label" class="cell medium narrow whiter">Temperatur Norden<br></div>
        <center><div data-type="label"
                            data-device="Temperatur_Norden"
                            data-get="temperature"
                            data-limits="[-50,0,10,25,30,40]"
                            data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
                            data-unit="%B0C%0A"
                            class="cell larger">
</div>
</center>
</td>

    <td><center><div data-type="label" class="cell medium narrow whiter"><big>↑</big> Sonnenaufgang<br></div>
<span style="color:#00FA9A">
<div data-type="label"
data-device="myTwilight"
data-get="sr_civil"
class="cell larger">
</div></span>
</center>
</td>

    <td><center><div data-type="label" class="cell medium narrow whiter"><big>↓</big> Sonnenuntergang<br></div>
<span style="color:#2E64FE">
<div data-type="label"
data-device="myTwilight"
data-get="ss_civil"
class="cell larger">
</div></span>
</center>
</td>

    <td><center><div data-type="label" class="cell medium narrow whiter">Sichtweite<br></div>
                    <div data-type="label"
                            data-device="MeinWetter"
                            data-get="visibility"
                            data-unit=" km"
class="cell larger">
</center>
</td>
  </tr>
 
  <tr>
    <td><div data-type="label" class="cell medium narrow whiter">Feuchte<br></div>
        <center><div data-type="label"
             data-device="Temperatur_Norden"
             data-get="humidity"
             data-limits="[0,40,60]"
             data-colors='["#9999ff","#aa6900","#ff6900"]'
             data-unit=" %"
             class="cell larger">
</div>
</center></td>

<td class="container weather" colspan="2" rowspan="2">
<center><div data-type="weather"
data-device="MeinWetter"
data-get="condition"
data-imageset="kleinklima"
style="width:150px" class="inline"></div>
<br>
<div data-type="label"
data-device="MeinWetter"
data-get="condition"
class="cell larger"></div>

</center>
    </td>

    <td><center><div data-type="wind_direction"
    data-device="MeinWetter"
    data-direction="wind_direction"
    data-speed="wind_speed"
    data-calm="-"
    data-size="70"
    data-tickstep="45"
    data-angleoffset="0"></div> 
    </center></td>
</tr>

<tr>
    <td><div data-type="label" class="cell medium narrow whiter">Temperatur Süden<br></div>
        <center><div data-type="label"
                            data-device="Temperatur_Terrasse"
                            data-get="temperature"
                            data-limits="[-50,0,10,25,30,40]"
                            data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
                            data-unit="%B0C%0A"
                            class="cell larger">
</div>

</center>
</td>
   
<td><center><div data-type="label" class="cell medium narrow whiter">Wind<br></div>
    <div data-type="label"
             data-device="WetterProplanta"
             data-get="wind_speed"
             data-unit=" km/h"
             data-limits="[0,        19,       28,       38,       49,       74,       102,      117]"
             data-colors='["#ffffff","#dddddd","#aa6900","#aa6900","#ff9999","#ff6666","#ff3333","#ff0000"]'
             class="cell larger">
         </div>
   
</center>
    </td>

</tr>
<tr>
    <td><center><div data-type="label" class="cell medium narrow whiter">UV-Index<br></div>
<div data-type="label"
             data-device="WetterProplanta"
             data-get="fc0_uv"
             data-limits="[0,2,10]"
             data-colors='["grey","orange","red"]'
class="cell larger">
         </div>

</center>
    </td>
    <td><center><div data-type="label" class="cell medium narrow whiter">Regen<br></div>
<br>
<i class="fa fa-umbrella"></i>
        <div data-type="label"
             data-device="WetterProplanta"
             data-get="fc0_chOfRainDay"
             data-unit=" %"
             style="display:inline"
class="cell larger"
             data-limits="[0,          10,         20,    30,      40,     50,     60,     70,     80,     90,       100]"
     data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]'></div>
<i class="fa fa-tint"></i>
        <div data-type="label"
             data-device="WetterProplanta"
             data-get="rain_day"
             data-unit=" l"
             data-limits="[0,          2,         5,       7,       10,      15,       20,        25,       30,      40,        50]"
     data-colors=["#C0FF3E","#B3EE3A","#9ACD32","#CDC673","#FFA500","#EE9A00","#FF7F50","#FF7256","#EE6A50","#FF3030","#FF0000"]
     style="display:inline"
class="cell larger">
        </div>
</center>
    </td>

<td><center><div data-type="label" class="cell medium narrow whiter">Luftdruck<br></div>
<br>
<div data-type="label"
            data-device="Temperatur_Terrasse"
            data-get="pressure"
            data-unit=" hPa"
            data-limits="[0,950,1000]"
        style="display:inline"
            data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
    <div data-type="label"
data-device="MeinWetter"
            data-get="pressure_trend_sym"
        style="display:inline">
    </div></center>
    </td>

<td><center><div data-type="label" class="cell medium narrow whiter">Frost<br></div>
<br>
        <div data-type="symbol"
             data-device="WetterProplanta"
             data-get="fc0_frost"
             data-get-off='0'
             data-get-on='1'
     data-off-color='#262626'
             data-on-color='#9999ff'
     data-icon="fs-frost"
             class="inline top-narrow center cell">
         </div>
</center>
</td>

    <!--<td><center><div data-type="label" class="inline"><small>Taupunkt<br></small></div>
        <div data-type="label"
             data-device="WetterProplanta"
             data-get="dewPoint"
             data-unit="%B0C%0A"></div>
        </center>
    </td>-->

   
</tr>
</table>

</li>

Zu den einzelnen Tagen die habe ich angefangen mit Sheet > Row > Cell aber hier bekomme ich das Wettericon nicht kleiner zweite Screenshot
(linke Seite neu, rechte Seite die alte Variante)

der code dazu:

Code Auswählen Erweitern

<!-- ======= Wettervorhersage 2.Tag ======= -->
<!-- ====================================== -->
<li data-row="7" data-col="3" data-sizex="2" data-sizey="3" class="semitransparent3d">
<header><div data-type="label"
data-device="MeinWetter"
data-get="fc2_day_of_week"
style="display:inline">
</div>
</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="cell"
data-type="weather"
data-device="MeinWetter"
data-get="fc2_condition"
data-imageset="kleinklima">
</div>
</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="cell top-align medium whiter" style="font-size:120%"
data-type="label"
data-device="MeinWetter"
data-get="fc2_condition">
</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<big>↓</big>
<div class="inline large top-align"
data-type="label"
data-device="WetterProplanta"
data-get="fc1_tempMin"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A">
</div>
<big>↑</big>
        <div class="inline" style="font-size:150%"
data-type="label"
data-device="WetterProplanta"
data-get="fc1_tempMax"
data-limits="[-25,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A">
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<!--div class="cell top-align large whiter" data-type="label">Ein - Aus</div-->
<i class="newline"></i>
<i class="fa fa-umbrella"></i>
<div class="inline top-align" style="font-size:150%"
data-type="label"
data-device="WetterProplanta"
data-get="fc1_chOfRainDay"
data-limits="[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
data-colors=["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]
data-unit=" %">
</div>
</div>

</div>
</li>

[setstate]

Beim Weather Widget gab es keine Änderungen. Die "kleinklima" Images werden immer mit Width 100% gezeichnet.
Ich habe aber jetzt CSS Klassen für img angelegt. Dann kann man bei data-imageset="kleinklima" die Images z.B. mit class="small" kleiner machen, oder class="mini" oder auch größer class="big"

[moonsorrox]

Ok das mit den einzelnen Tagen (screenshot 2) habe ich jetzt hinbekommen, aber erst nachdem ich ein weiteres Update gemacht habe 
Nun muss ich mich mal an die große Wetteranzeige (screenshot 1) auf der Seite machen, die wird sicher schwieriger das alles wieder zu richten, selbst größer machen hat nichts gebracht der header ist halb weg.
Nochmals die Frage sollte ich weg von der Tabelle gehen und das mit "Sheet > Row > Cell" machen. Denn die Tabelle hat es mir ja komplett verschoben..! 

[setstate]

Nochmals die Frage sollte ich weg von der Tabelle gehen und das mit "Sheet > Row > Cell" machen. Denn die Tabelle hat es mir ja komplett verschoben..! 

Du musst nicht wechseln. Alles ist möglich. Du musst nur schauen, was das Verschieben verursacht. Am besten alle class="" erst einmal raus. Weniger ist mehr.

[moonsorrox]

OK ich habe aber gemerkt das <table> sich schwer tut, bis ich das hinformatiert habe bin ich 100...

Ich habe umgestellt auf Row > Cell und stoße jetzt an meine Grenzen.
Vllt. kannst du mal drauf schauen... (ich habe extra in jeder Celle etwas drin stehen da ich nicht weiß ob es sich sonst verschiebt)

Wie du siehst am Screenshot habe ich vier Spalten/Col und 4 Reihen/Row
Ich möchte folgendes erreichen in der Mitte sollen die 4 Cellen beschriftet mit Wert1 - Wert 4 ein Feld ergeben in dem möchte ich ein großes Wetter Icon mit der Schrift/Kondition darunter darstellen, wenn ich das in ein normales Feld bringe schiebt er das ganze Layout auseinander, deshalb also die Frage wie ich das in meinem Code einbaue, meine Versuche scheitern kläglich.. 

Evtl reicht es auch schon nur Wert 1/2 zu verbinden und in Wert 3/4 die Schrift/Kondition rein zu bringen. Oder so wie mein Gedanke ist eben alles in die 4 Felder zu bringen..

Formatiert habe ich da noch fast gar nichts und es steht eigentlich schon relativ gut da, ich habe rechts den Wind zweimal drin weil ich da eine leere Cell hatte, aber ich denke das bekommt man noch mit formatieren hin.

Hie rmal mein Code

Code Auswählen Erweitern

<li data-row="3" data-col="3" data-sizex="8" data-sizey="5" class="semitransparent3d">
<header>Sheet > Row > Cell</header>
<div class="sheet">

<!-- ============= Reihe 1 =========== -->
<div class="row">
        <div class="col">
<div class="row">
                <div class="col-1-4">
                    <div data-type="label" class="cell medium narrow whiter">Temperatur Norden</div>
                    <div class="cell larger"
data-type="label"
data-device="Temperatur_Norden"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A">
</div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label"><big>↑</big>Sonnenaufgang</div>
<div class="cell larger" style="color:#00FA9A" data-type="label" data-device="myTwilight" data-get="sr_civil"></div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label"><big>↓</big>Sonnenuntergang</div>
<div class="cell larger" style="color:#2E64FE" data-type="label" data-device="myTwilight" data-get="ss_civil"></div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label" >Sichtweite</div>
<div class="cell larger" data-type="label" data-device="MeinWetter" data-get="visibility" data-unit=" km"></div>
</div>

<!-- ============= Reihe 2 =========== -->
    <div class="row">
                <div class="col-1-4">
<div class="row">
<div class="col">
<div class="cell medium narrow whiter" data-type="label">Feuchte</div>
<div class="cell larger" data-type="label" data-device="Temperatur_Norden" data-get="humidity"
data-limits="[0,40,60]" data-colors='["#9999ff","#aa6900","#ff6900"]' data-unit=" %">
</div>
</div>
</div>
</div>
                <div class="col-1-4">
                    <div data-type="label" class="">Wert 1</div>
                </div>
<div class="col-1-4">
<div data-type="label" class="">Wert 2</div>
                </div>
<div class="col-1-4">
                <div class="row">
<div class="col-1-4">
<div data-type="wind_direction" data-device="MeinWetter" data-direction="wind_direction" data-speed="wind_speed" data-calm="-" data-size="70" data-tickstep="45" data-angleoffset="0"></div>
<div class="cell medium narrow whiter" data-type="label">Wind</div>
</div>
</div>
                </div>
            </div>

<!-- ============= Reihe 3 =========== -->
            <div class="row">
                <div class="col-1-4">
                    <div class="cell medium narrow whiter" data-type="label">Temperatur Süden</div>
                    <div class="cell larger" data-type="label" data-device="Temperatur_Terrasse" data-get="temperature" data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' data-unit="%B0C%0A">
</div>
                </div>

                <div class="col-1-4">
                    <div data-type="label" class="">Wert 3</div>
                </div>
                <div class="col-1-4">
                   <div data-type="label" class="">Wert 4</div>
                </div>
<div class="col-1-4">
                    <div class="cell medium narrow whiter" data-type="label">Wind</div>
                    <div data-type="label" class=""></div>
                </div>
             </div>

<!-- ============= Reihe 4 =========== -->
            <div class="row">
                <div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label">Luftdruck<br></div>
<div data-type="label"   
data-device="Temperatur_Terrasse" 
data-get="pressure"
data-unit=" hPa"
data-limits="[0,950,1000]"
style="display:inline"
data-colors='["#ff9999","#aa6900","#9999ff"]'>
</div>
<div data-type="label" data-device="MeinWetter" data-get="pressure_trend_sym" style="display:inline">
</div>

                   
                </div>
                <div class="col-1-4">
                    <div class="cell medium narrow whiter" data-type="label">Regen</div>
<i class="fa fa-umbrella"></i>
<div class="cell larger" style="display:inline" data-type="label"     data-device="WetterProplanta"
data-get="fc0_chOfRainDay"
data-unit=" %"
data-limits="[0,          10,         20,    30,      40,     50,     60,     70,     80,     90,       100]"
data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]'>
</div>
<i class="fa fa-tint"></i>
<div data-type="label"     data-device="WetterProplanta"
data-get="rain_day"
data-unit=" l"
data-limits="[0,          2,         5,       7,       10,      15,       20,        25,       30,      40,        50]"
data-colors=["#C0FF3E","#B3EE3A","#9ACD32","#CDC673","#FFA500","#EE9A00","#FF7F50","#FF7256","#EE6A50","#FF3030","#FF0000"]
style="display:inline"
class="cell larger">
</div>
                </div>

                <div class="col-1-4">
                    <div class="cell medium narrow whiter" data-type="label">UV-Index</div>
<div class="cell larger" data-type="label" data-device="WetterProplanta" data-get="fc0_uv" data-limits="[0,2,10]" data-colors='["grey","orange","red"]'>
</div>
                </div>
<div class="col-1-4">
                    <div class="cell medium narrow whiter" data-type="label">Frost</div>
                    <div class="cell top-narrow center" data-type="symbol" data-device="WetterProplanta" data-get="fc0_frost" data-get-off='0' data-get-on='1' data-off-color='#262626'
data-on-color='#9999ff' data-icon="fs-frost">
</div>
                </div>
             </div>
        </div>
        <!--div class="col-1-2">
            <div data-type="volume" data-device='Volume1' class="" ></div>
        </div-->
   </div>

</div>
</li>


[setstate]

Das würde ich anders machen

- data-colors=["#C0FF3E",...

muss

data-colors='["#C0FF3E",...

sein. Einmal einfache Hochkomma für das Array und pro Element doppelte Hochkommas

- Wo keine Datenaustausch mit FHEM stattfinden soll, bedarf es auch keines data-type="label" <- für bessere Performance
- Ich kenne viele CSS Klassen nicht: whiter, larger ...
- ich würde alles was untereinander stehen soll, in eine Cell packen

Code Auswählen Erweitern


<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>


[moonsorrox]

Das würde ich anders machen

- data-colors=["#C0FF3E",...

muss

data-colors='["#C0FF3E",...

sein. Einmal einfache Hochkomma für das Array und pro Element doppelte Hochkommas

ja ist kleiner Fehler von mir, habe ich so nicht gesehen

- Wo keine Datenaustausch mit FHEM stattfinden soll, bedarf es auch keines data-type="label" <- für bessere Performance

einfach weglassen, oder..?

- Ich kenne viele CSS Klassen nicht: whiter, larger ...

von mir angelegt in der xxx-user.css

- ich würde alles was untereinander stehen soll, in eine Cell packen

genau das habe ich probiert, aber diese mit row/col zu versehen ist mir da in der mitte nicht gelungen, war immer alles verschoben...

weiterhin habe ich noch einen Fehler, der hat wohl mit dem Windrichtungsanzeiger zutun..?!
Error
widget_volume.js:231
ReferenceError: Modul_knob is not defined

[Ulm32b]

Hallo,

das beigefügte Bild basiert auf Columns mit definierter Breite. Deren Summe ist 100. Warum kommt dann links und rechts ein so breiter Rand?

Code Auswählen Erweitern

</li>


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

<div class="row">


<div class="col-12">
<div class="container">
<div data-type="wind_direction"
data-device="WetterProplanta"
data-direction="windDir"
data-speed="wind"
data-calm="-"
data-size="50"
data-tickstep="45"
data-angleoffset="0"></div>
<div class="cell big" data-type="label" data-device="WetterProplanta" data-get="wind" data-unit="km/h" data-fix="0"></div>
</div>
</div>

<div class="col-19">
<div class="container">
<div class="cell big bottom-align" data-type="label"
data-device="WetterProplanta"
data-get="pressure"
data-unit="hPa"
data-fix="0"></div>
<div class="cell" data-type="label">Luftdruck</div>
</div>
</div>

<div class="col-19">
<div class="container">
<div class="cell big bottom-align" data-type="label"
data-device="WetterProplanta"
data-get="humidity"
data-unit="%"
data-fix="0"></div>
<div class="cell" data-type="label">Feuchte</div>
</div>
</div>

<div class="col-19">
<div class="container">
<div class="cell big bottom-align" data-type="label"
data-device="WetterProplanta"
data-get="visibility"
data-unit="km"
data-fix="0"></div>
<div class="cell" data-type="label">Sicht</div>
</div>
</div>

<div class="col-19">
<div class="container">
<div data-type="label" data-icon="J" class="cell weather"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenaufgang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large narrow"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenuntergang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large"></div>
</div>
</div>

<div class="col-12">
<div class="container ">
<div data-type="label" data-icon="K" class="cell weather"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonRise" class="cell large narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonSet" class="cell large"></div>
</div>
</div>


</div>

</li>

[SirMarco]

Kann mir jemand helfen?
left-space reagiert nicht bei der Kombi sheet -> row> cell auf den text.

Ziel-> Das Denon und TV übereinander sind

Denon:

Code Auswählen Erweitern


<section>
<div class="sheet">
<div class="row">
<div class="cell-1-2 left-align[color=red] left-space-2x[/color]" onclick="if ($('#dropavr').is(':hidden')) { $('#dropavr').slideDown(250); $('#dropdownavr > i.fa').addClass('fa-rotate-180'); } else { $('#dropavr').slideUp(250); $('#dropdownavr > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownavr">Denon
<!--i class="fa fa-angle-double-down big cell left-space-3x"></i-->
</div>
<div class="normal cell-1-4 right-align"
data-type="switch"
data-device="TV_02">
</div>
<div class="cell-1-4 normal right-align"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
</div>
</div>
</section>


TV:

Code Auswählen Erweitern


<section>
    <div class="sheet">   
<div class="row">
        <div class="cell-1-2">
<div data-type="label" class="normal left-align left-space">TV</div>
</div>
            <div class="cell-1-4 right-align right-space">
<div data-type="switch"
data-label="Home"
data-device="TV_01"
class="right-space"></div>
<!--div data-type="label" class="normal">1</div-->
</div>
            <div class="cell-1-4 right-align">
<div data-type="switch"
data-label="Home"
data-device="TV_01"
class="right-space"></div>
<!--div data-type="label" class="normal right-space">Wohnzimmer</div-->
</div>
</div>
</div>
</section>


[setstate]

Schau doch mal, bei Denen steht ganz viel Müll in Class drin

left-space-2x" onclick="if ($('#dropavr').is(':hidden')) { $('#dropavr').slideDown(250); $('#dropdownavr > i.fa').addClass('fa-rotate-180'); } else { $('#dropavr').slideUp(250); $('#dropdownavr > i.fa').removeClass('fa-rotate-180'); }"
            id="dropdownavr">Denon

Das muss alles weg und dann "left-space" rein -> funzt

[SirMarco]

Habe da leider nicht so viel Müll gesehen  ich wollte mit " left-space-2x" im Code rot formatieren
Das

Code Auswählen Erweitern

cell-1-2 auch weg? Da fehlt doch die grössen Angabe?

Also ohne läuft es auch 


So funktioniert es:

Code Auswählen Erweitern

<div class="sheet">
<div class="row">
<div class="left-align left-space" onclick="if ($('#dropturm').is(':hidden')) { $('#dropturm').slideDown(250); $('#dropdownturm > i.fa').addClass('fa-rotate-180'); } else { $('#dropturm').slideUp(250); $('#dropdownturm > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownturm">Turm
<i class="fa fa-angle-double-down big cell"></i>
</div>
<div class="cell-1-4 normal right-align"
data-type="switch"
data-device="Turm"
data-get="state"
data-get-on="on.*"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-on-color="#eee"
data-off-color="#eee"
data-on-background-color="#0088CC"
data-off-background-color="#888">
</div>
<div class="right-align right-space"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
</div>
</div>

[SirMarco]

Ein kleines Verständis Problem zu der Positionierung habe ich noch:
Kann man col-2 und col-1-2 zusammen verwenden? Welche WErte kann man nutzen? Alle die in der css vorhanden sind?