Problem bei verschachteltem sheet

[Fritz Muster]

Hallo in die Runde,

irgendwie will mir die Erstellung eines verschachtelten sheets nicht gelingen. Ich habe mich an dem sheet Wiki orientiert und kann keinen Fehler finden. Mein Code sieht so aus

Code Auswählen Erweitern

<li data-row="1" data-col="7" data-sizex="4" data-sizey="3">
<header>Temp. / Feuchte</header>
<div class="sheet">
<div class="row">
<div class="cell-75">
<div class="sheet">
<div class="row">
<div class="cell-33 bg-red">
<div class="bigger">1</div>
</div>
<div class="cell-33 bg-green">
<div class="bigger">2</div>
</div>
<div class="cell-33 bg-red">
<div class="bigger">3</div>
</div>
</div>
<div class="row">
<div class="cell-33 bg-green">
<div class="bigger">4</div>
</div>
<div class="cell-33 bg-red">
<div class="bigger">5</div>
</div>
<div class="cell bg-green">
<div class="bigger">6</div>
</div>
</div>
                        </div>
<div class="sheet">
<div class="row">
<div class="bg-red cell-33">
<div class=" bigger">7</div>
</div>
<div class="bg-green cell-33">
<div class="bigger">8</div>
</div>
<div class="bg-red cell-17">
<div class="bigger">9</div>
</div>
<div class="bg-green cell">
<div class="bigger">10</div>
</div>
</div>
                        </div>
<div class="sheet">
<div class="row">
<div class="cell center-align">
<div class="valueonly" data-type="spinner" data-device="CUL_HM_HM_CC_TC_1935D5_Climate" data-get="desired-temp" data-set="desired-temp" data-step="0.5" data-min="10" data-max="30" data-unit="°"></div>
</div>
</div>
</div>
<div class="sheet">
<div class="row">
<div class="bg-red cell-1-3">
<div class="bigger">12</div>
</div>
<div class="bg-green cell-1-3">
<div class="bigger">13</div>
</div>
<div class="bg-red cell">
<div class="bigger">14</div>
</div>
</div>
<div class="row">
<div class="bg-green cell-1-3">
<div class="bigger">15</div>
</div>
<div class="bg-red cell-1-3">
<div class="bigger">16</div>
</div>
<div class="bg-green cell">
<div class="bigger">17</div>
</div>
</div>
<div class="row">
<div class="bg-red cell-1-3">
<div class="bigger">18</div>
</div>
<div class="bg-green cell-1-3">
<div class="bigger">19</div>
</div>
<div class="bg-red cell">
<div class="bigger">20</div>
</div>
</div>
</div>
</div>
<div class="cell-25">

<div class="bg-red">
<div class="bigger">21</div>
</div>

</div>
</div>
</div>
</li>


Das Ergebnis (screenshot) ist als Datei angehängt.

So und jetzt zu meinen Problemen bzw. Fragen.

1. Warum sind die Container 7, 8, 9 und 10 höher als die in den anderen Reihen?
2 Warum werden die Container 9 und 10 nicht gleich groß? Die 4 Zellen sollten doch laut Code 33 / 33 / 17 / 17 aufgeteilt werden!
2. Warum gehen die Container 18,19 und 20 nach unten über die Kachel raus?
3. Warum wird der Container 21 nicht über die volle Höhe gemacht?
4. Warum ist der Spinner am linken Rand, obwohl in der class center-align positioniert wird?

Bin echt gespannt wo meine Fehler sind!

Danke und Grüße.

Fritz

[devil77]

Code Auswählen Erweitern

1. Warum sind die Container 7, 8, 9 und 10 höher als die in den anderen Reihen?
Liegt an den CSS, da wird folgendes definiert

Code Auswählen Erweitern

.sheet:first-child:nth-last-child(4),
.sheet:first-child:nth-last-child(4) ~ .sheet {
    height: 25%;
}
Damit bekommt diese Zeile eine Höhe von 25% zugewiesen. Definiere einfach ein geringere Höhe und schon sieht sie gleich hoch aus.

Code Auswählen Erweitern

2 Warum werden die Container 9 und 10 nicht gleich groß? Die 4 Zellen sollten doch laut Code 33 / 33 / 17 / 17 aufgeteilt werden!
Hast Du in der Css auch die 17% definiert? Soweit wie ich das erkennen kann gibt es keine Klasse "cell-17".

Code Auswählen Erweitern

2. Warum gehen die Container 18,19 und 20 nach unten über die Kachel raus?
Weil dein Inhalt einfach zu groß ist für die Kachel und die Tabelle nimmt sich den Platz den sie braucht.

Code Auswählen Erweitern

3. Warum wird der Container 21 nicht über die volle Höhe gemacht?
Container 21 ist über die volle Höhe. Setze den roten Hintergrund einfach hinter cell-25.

Code Auswählen Erweitern

4. Warum ist der Spinner am linken Rand, obwohl in der class center-align positioniert wird?
Genau weiß ich das nicht aber probier mal anstatt folgenden Code

Code Auswählen Erweitern


<div class="sheet">
<div class="row">
<div class="cell center-align">
<div class="valueonly" data-type="spinner" data-device="CUL_HM_HM_CC_TC_1935D5_Climate" data-get="desired-temp" data-set="desired-temp" data-step="0.5" data-min="10" data-max="30" data-unit="°"></div>
</div>
</div>
</div>

den Code hier. Damit dürfte der Spinner zentriert werden.

Code Auswählen Erweitern


<div class="hbox">
<div class="centered">
<div class="valueonly" data-type="spinner" data-device="CUL_HM_HM_CC_TC_1935D5_Climate" data-get="desired-temp" data-set="desired-temp" data-step="0.5" data-min="10" data-max="30" data-unit="°"></div>
</div>
</div>


Ich würde versuchen das Ganze mit flex-Box zu lösen. Ist einfacher und übersichtlicher als das ganze Tabellen gebastle.
Meiner Meinung nach wird damit der Code einfach zu unübersichtlich.

[Fritz Muster]

zu 1. Das mit den "festen 25%" der child sheet divs habe ich nicht gewusst, Danke!

zu 2 Habe das Wiki so interpretiert, das ein beliebiger Wert für cell-x eingegeben werden kann. Aber OK

zu 2. Leuchtet mir ein

zu 3. Ahh OK!

zu. 4 Auch OK, probiere ich mal

Den Tipp mit hbox/vbox werde ich mal probieren! Danke

Grüße Fritz

[devil77]

Beliebige Werte kann mann verwenden. muss sie aber in der css definieren.