Guten Abend,
Wie kann man denn beim Sheet die Reihenhöhe definieren bzw die entstehende Tabelle näher zusammen rücken?
<li data-row="4" data-col="6" data-sizex="2" data-sizey="2">
<header>Benzinpreise</header>
<div class="sheet top-narrow-10">
<div class="row top-narrow-10 bold">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Tankstelle</div>
</div>
<div class="cell-1-3">
</div>
<div class="cell-1-3">
<div data-type="label" class="right-align right-space">Diesel/Super</div>
</div>
</div>
<div class="row top-narrow-10">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Shell</div>
</div>
<div class="cell-1-3">
<div data-type="symbol" data-icon="fa-gas-pump" class="small"></div>
</div>
<div class="cell-1-3">
<div data-type="label" data-device="Shell" data-get="Diesel" class="right-align right-space"></div>
<div data-type="label" data-device="Shell" data-get="SuperE5" class="right-align right-space"></div>
</div>
</div>
<div class="row top-narrow-10">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Star</div>
</div>
<div class="cell-1-3">
<div data-type="symbol" data-icon="fa-gas-pump" class="small"></div>
</div>
<div class="cell-1-3">
<div data-type="label" data-device="Star" data-get="Diesel" class="right-align right-space"></div>
<div data-type="label" data-device="Star" data-get="SuperE5" class="right-align right-space"></div>
</div>
</div>
<div class="row top-narrow-10">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Walther</div>
</div>
<div class="cell-1-3">
<div data-type="symbol" data-icon="fa-gas-pump" class="small"></div>
</div>
<div class="cell-1-3">
<div data-type="label" data-device="BFT_Walther" data-get="Diesel" class="right-align right-space"></div>
<div data-type="label" data-device="BFT_Walther" data-get="SuperE5" class="right-align right-space"></div>
</div>
</div>
</div>
</li>
<li data-row="4" data-col="6" data-sizex="2" data-sizey="2">
<header>Benzinpreise</header>
<div>
<div class="sheet-75">
<div class="row bold">
die top-narrow-* braucht man hier nicht
Zur Erklärung:
- die erste + einzige <div> innerhalb eines <li> bekommt (per Code) eine height von 100% (minus header-Höhe)
- deshalb muss dein <sheet> in einen Dummy-<div>-Wrapper
- dann kann man dem <sheet> eine beliebige Höhe zuweisen -> sheet-60 (60%)
- die <row> werden automatisch verteilt. Man kann aber auch diese anders verteilen: row-40, row-60 (Summe immer 100%)
- die benutzen Icons haben Mindesthöhen, dadurch kommt man bei den Rows und beim Sheet nicht unter eine bestimmte Höhe
Es gibt:
sheet-8
sheet-12
sheet-20
sheet-25
sheet-33
sheet-40
sheet-50
sheet-60
sheet-66
sheet-70
sheet-75
sheet-80
sheet-90
sheet-100
sheet-1-12
sheet-1-8
sheet-1-5
sheet-1-4
sheet-1-3
sheet-2-5
sheet-1-2
sheet-3-5
sheet-2-3
sheet-1-12
sheet-4-5
sheet-1-1
Ähnliche Werte auch beim row
row-25
row-50
usw.
Ich muss nochmal durchsehen, ob Werte fehlen. Beim sheet fehlte zum Beispiel sheet-70
Danke erst mal für deine Antwort...
gibt es denn die Class Wrapper schon oder muss ich die selber Anlegen?
Nur ein simples <div> ohne class
vorher:
<li data-row="4" data-col="6" data-sizex="2" data-sizey="2">
<header>Benzinpreise</header>
<div class="sheet">
....
</div>
</li>
nachher:
<li data-row="4" data-col="6" data-sizex="2" data-sizey="2">
<header>Benzinpreise</header>
<div>
<div class="sheet-75">
....
</div>
</div>
</li>
nur leider geht das nicht. habe ich eingefügt...
<li data-row="4" data-col="7" data-sizex="2" data-sizey="2">
<header>Benzinpreise</header>
<div>
<div class="sheet-50">
<div class="row bold">
<div class="cell-1-3">
<div data-type="label" class="">Tankstelle</div>
</div>
<div class="cell-1-3">
<div data-type="label" class="cell green">Diesel</div>
</div>
<div class="cell-1-3">
<div data-type="label" class="cell red">/Super</div>
</div>
</div>
<div class="row">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Shell</div>
</div>
<div class="cell-1-3">
<div data-type="symbol" data-icon="fa-gas-pump" class="small"></div>
</div>
<div class="cell-1-3">
<div data-type="label" data-device="Shell" data-get="Diesel" class="right-align right-space green"></div>
<div data-type="label" data-device="Shell" data-get="SuperE5" class="right-align right-space red"></div>
</div>
</div>
<div class="row">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Star</div>
</div>
<div class="cell-1-3">
<div data-type="symbol" data-icon="fa-gas-pump" class="small"></div>
</div>
<div class="cell-1-3">
<div data-type="label" data-device="Star" data-get="Diesel" class="right-align right-space green"></div>
<div data-type="label" data-device="Star" data-get="SuperE5" class="right-align right-space red"></div>
</div>
</div>
<div class="row">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Walther</div>
</div>
<div class="cell-1-3">
<div data-type="symbol" data-icon="fa-gas-pump" class="small"></div>
</div>
<div class="cell-1-3">
<div data-type="label" data-device="BFT_Walther" data-get="Diesel" class="right-align right-space green"></div>
<div data-type="label" data-device="BFT_Walther" data-get="SuperE5" class="right-align right-space red"></div>
</div>
</div>
<div class="row top-narrow-10">
<div class="cell-1-3">
<div data-type="label" class="left-align left-space">Elan</div>
</div>
<div class="cell-1-3">
<div data-type="symbol" data-icon="fa-gas-pump" class="small"></div>
</div>
<div class="cell-1-3">
<div data-type="label" data-device="Elan" data-get="Diesel" class="right-align right-space green"></div>
<div data-type="label" data-device="Elan" data-get="SuperE5" class="right-align right-space red"></div>
</div>
</div>
</div>
</div>
</li>
was geht da nicht?
Zitat von: setstate am 27 Januar 2019, 14:35:02
was geht da nicht?
die Tabelle wird nicht kleiner
Das sind die Icon in Symbol, die haben eine gewissen Rand.
Man kann diesen mit class="compress" oder class="compress-50" shrinken.
<div data-type="symbol" data-icon="fa-gas-pump" class="small compress-50"></div>
Zitat von: setstate am 27 Januar 2019, 14:45:53
Das sind die Icon in Symbol, die haben eine gewissen Rand.
Man kann diesen mit class="compress" oder class="compress-50" shrinken.
<div data-type="symbol" data-icon="fa-gas-pump" class="small compress-50"></div>
jepp das hat schon etwas gebracht...SUPER. damit komme ich weiter ;)