[FTUI] Sheet Reihenhöhe definieren?

[patman1607]

Guten Abend,

Wie kann man denn beim Sheet die Reihenhöhe definieren bzw die entstehende Tabelle näher zusammen rücken?

Code Auswählen Erweitern

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



[setstate]

Code Auswählen Erweitern


<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

[patman1607]

Danke erst mal für deine Antwort...
gibt es denn die Class Wrapper schon oder muss ich die selber Anlegen?

[setstate]

Nur ein simples <div> ohne class

vorher:

Code Auswählen Erweitern


<li data-row="4" data-col="6" data-sizex="2" data-sizey="2">
   <header>Benzinpreise</header>
<div class="sheet">
          ....
        </div>
</li>


nachher:

Code Auswählen Erweitern


<li data-row="4" data-col="6" data-sizex="2" data-sizey="2">
   <header>Benzinpreise</header>
      <div>
<div class="sheet-75">
           ....
        </div>
     </div>
</li>


[patman1607]

nur leider geht das nicht. habe ich eingefügt...

Code Auswählen Erweitern

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

[setstate]

was geht da nicht?

[patman1607]

was geht da nicht?

die Tabelle wird nicht kleiner

[setstate]

Das sind die Icon in Symbol, die haben eine gewissen Rand.

Man kann diesen mit class="compress" oder class="compress-50" shrinken.

Code Auswählen Erweitern


<div data-type="symbol" data-icon="fa-gas-pump" class="small compress-50"></div>


[patman1607]

Das sind die Icon in Symbol, die haben eine gewissen Rand.

Man kann diesen mit class="compress" oder class="compress-50" shrinken.

Code Auswählen Erweitern


<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