Tablet UI Probleme mit Tabellenformatierung evtl. sortieren möglich?

[B.Stromberg]

Moin!
Da ich weiter meine Tablet UI auf Fordermann bringen möchte, wollte ich nun gern meinen Müllkalender verschönen.

Was nicht in meinen Kopf rein will ist, warum die Abstände zwischen den Zeilen so groß sind?!?! Oder liegt das an den Icons?
Wie würde ich die Ausgaben vernünftig in 4 Zeilen bekommen, ohne das ich 2 oder 3 Leerzeilen dazwischen habe?

2. Frage wäre, ob und vor allem wenn ja, "wie?" ich es hinbekommen könnte, die Ausgabe dynamisch nach den verbleibenden Tagen zu sortieren?
Also von wenig nach viel.

Hier mein bisheriger code aus der html:

Code Auswählen Erweitern


<table width="100%" class="">
<tr><td><div data-type="symbol" data-icon="fa-trash-o small" data-color="#2d9e1c" class="left"></div></td><td><div data-type="label" data-device="myABFALL" data-get="GrueneBiotonneSaisonbiotonne_days" data-unit=" Tag(e)" class="big"></div></td><td><div data-type="label" data-device="myABFALL" data-get="GrueneBiotonneSaisonbiotonne_weekday" class="inline right"></div></td></tr>
<tr><td><div data-type="symbol" data-icon="fs-dustbin small" data-color="#4651F4" class="left"></div></td><td><div data-type="label" data-device="myABFALL" data-get="BlaueAltpapiertonne_days" data-unit=" Tag(e)" class="big"></div></td><td><div data-type="label" data-device="myABFALL" data-get="BlaueAltpapiertonne_weekday" class="inline right"></div></td></tr>
<tr><td><div data-type="symbol" data-icon="fa-trash-o small" data-color="#696969" class="left"></div></td><td><div data-type="label" data-device="myABFALL" data-get="GraueRestmuelltonne_days" data-unit=" Tag(e)" class="big"></div></td><td><div data-type="label" data-device="myABFALL" data-get="GraueRestmuelltonne_weekday" class="inline right"></div></td></tr>
<tr><td><div data-type="symbol" data-icon="fs-bag small" data-color="#F4E946" class="left"></div></td><td><div data-type="label" data-device="myABFALL" data-get="GelberSack_days" data-unit=" Tag(e)" class="big"></div></td><td><div data-type="label" data-device="myABFALL" data-get="GelberSack_weekday" class="inline right"></div></td></tr>
</table>


Und anbei ein Screenshot wie es bisher aussieht.

[B.Stromberg]

Hmmm....
Ist das nun so schwierig, dann wäre ich beruhigt...

Oder ist die Lösung so einfach, dass ich wieder zu blöd für die Suche zum richtigen Treffer bin?

[hsepm]

Code Auswählen Erweitern

class="left top-narrow"


sollte den vertikalen Abstand zwischen den Zeilen verringern.

Sortieren kannst du die Liste auf FHEM-Seite, indem du eine Sortierungsroutine erstellst und das Ergebnis in einem oder mehreren Dummy-Geräten abspeicherst.

P.S.: <table> wird von HTML5 zwar noch unterstützt, es wird aber nicht empfohlen, <table> für das Layout von Bildschirmelementen zu verwenden. Besser sind sheet, row, col... oder vbox, hbox.
 

[B.Stromberg]

Danke für deine Antwort

Mach mich nicht schwach, 90% meiner Tablet UI sind in "table" eingebettet und das hat mich Tage gekostet...

sheet, row, col... oder vbox, hbox sind für mich Böhmische Dörfer

[OdfFhem]

sheet, row, col
https://wiki.fhem.de/wiki/FTUI_Layout_Sheet

vbox, hbox
https://wiki.fhem.de/wiki/FTUI_Layout_Flex

[B.Stromberg]

sheet, row, col
https://wiki.fhem.de/wiki/FTUI_Layout_Sheet

vbox, hbox
https://wiki.fhem.de/wiki/FTUI_Layout_Flex

Danke für die Links

Grade die Sache mit der Vbox und hbox sieht interessant aus und scheint auch relativ einfach zu sein