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
<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
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
.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.
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".
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.
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.
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
<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.
<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.
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
Beliebige Werte kann mann verwenden. muss sie aber in der css definieren.