Ik kon geen passende titel bedenken, maar hopelijk kunnen jullie me helpen met de uitleg.
Ik ben bezig met een soort planning systeem. Dit zit allemaal mooi verwerkt in een tabel, in een tabel cel heb ik een list met daarin wat gegevens.
een list item ziet er zo uit:
status icoon | naam van de taak | taak acties
Status icoon heeft een vaste breedte, de naam van de taak kan vrij lang worden. Bij taak acties komen knopjes waarmee bv een taak kan verwijderd worden. De acties moeten rechts uitgelijnd worden, maar ik wil dat bij een lange naam, de breedte van het list-item mee verbreedt wordt.
Gebruik je een tabel of losse divs? Je spreekt namelijk eerst over een tabel en op het eind over divs.
Met een tabel is het niet zo ingewikkeld lijkt me, je geeft geen vaste width mee waardoor de kolommen zich aanpassen aan de inhoud. Dit doe je ook al met de 'naam van de taak' kolom.
Thomas - 14/04/2015 20:02 (laatste wijziging 14/04/2015 20:07)
Moderator
Er is ongetwijfeld een (ingewikkelde) oplossing, maar ik zou het anders aanpakken. Het probleem is een beetje: wanneer loop je tegen grenzen aan met je "variabele grootte" divs? Ik zou alles een semi-vaste breedte geven.
De kolom met het status icoon heeft al een vaste breedte.
De kolom van de taak zou ik ook een vaste breedte geven met een hidden overflow met wel wat padding zodat alles nog een beetje "lucht" heeft. EDIT: en een tooltip of title-attribuut of longdesc waar je wel de hele naam in terug kunt zien.
De kolom van de taken zou ik ook een vaste breedte geven met de volgende toevoeging: reserveer ruimte voor alle mogelijke taak-iconen, mits dit er niet teveel zijn. Alle taak-iconen hebben een vaste positie. Voor de taken die niet van toepassing zijn op het item doe je het volgende:
- ofwel je voegt hier een lege afbeelding toe
- ofwel je voegt hier een "inactief" icoon toe, wat jij leuk vindt
Ik zie in de screenshot 3 iconen:
- een prullenbak
- een soort van tekstballon
- een soort van checkbox
Als dit alle mogelijke iconen zijn, beredeneer dan wat de beste volgorde hiervoor is, bijvoorbeeld [checkbox][bubble][delete] (als het onverstandig is om de checkbox en de delete naast elkaar te zetten).
Voor je paarse taken wordt de actie balk dan [bubble][leeg][delete], voor je blauwe taken wordt dit [checbox][bubble][delete].
Probeer het eens uit, het geven van een vaste plaats aan iconen zorgt ervoor dat het prettiger leest, als je het mij vraagt, het oogt rustiger.
Overigens: van dit soort administratieve backends mogen best een beetje "tabular" overkomen, het gaat er hier om om (zo)veel (mogelijk) informatie tegelijkertijd weer te geven op een overzichtelijke manier, ik weet niet of responsive designs echt geschikt zijn voor zwaar administratieve backends, je hoeft die dus ook niet als zodanig op te zetten imo.
Ik heb een tabel en in de cel van een tabel werk ik met lists en in die lists (<li>) werk ik met divs.
@FangorN
Zover was ik ivm die vaste groottes, maar het probleem situeert zich dan nog steeds in het midden.. De naam van de taak.. die langer kan worden.. En in het geval van een langere taak, wil ik dat heel dat gekleurde stuk mee groter wordt..
Ik zou eigenlijk iets moeten hebben waarmee ik dit kan doen:
Waarbij col 1 een vaste breedte heeft en col 2 en col 3 een variabele afhankelijk van de content die erin zit. Nu ja, zoals jij al zegt kan ik die col3 een vaste breedte geven a.d.h.v. het maximum aantal action-buttons, maar het "probleem" daar is dat bepaalde users bij bepaalde taken slechts 1 optie hebben of zelfs totaal geen, en andere users bij bepaalde taken er 5 kunnen hebben. In geval van 0 acties, zou ik col3 kunnen weglaten, maar in geval van 1 optie, moet ik col3 wel gebruiken, en zou deze de breedte hebben van 5 buttons waardoor ik onnodig plaats gebruik/verlies.
En wat dat responsive betreft... Het is nu voorzien dat bij gebruik van een kleiner scherm, de tabel scrollable wordt, waarmee je van links naar rechts kan scrollen en bovendien scrollen zowel de y-headers als x-headers van de tabel mee Maar hoe dan ook, mijn tabelcel moet zich aanpassen aan mijn icoon + variabele naam lengte + evt vaste actie-button breedte.
Wellicht heb je iets aan het CSS-attribuut white-space in combinatie met de waarde nowrap. Hang deze stijl aan de kolom die je mee wilt laten groeien met de inhoud.
staat momenteel al op nowrap, vreemdgenoeg wordt de laatste div tóch soms op de volgende lijn geplaatst alsof die op float staat, wat ook niet het geval is.
Edit:
derde div staat wel op float, vandaar dat er zich problemen voordoen. Dat is ook de reden dat ik dit topic ben gestart.. Hoe ik ervoor kan zorgen dat icoon links komt, task-actions rechts en dat alles ertussen automatisch meerekt met de taaknaam
Hm, is het niet zo dat je met alle geweld met die ul's, li's en divs in feite gewoon de functionaliteit van tabellen aan het simuleren bent (mogelijk met evenveel of zelfs meer HTML)? Ik denk dat het veel simpeler is om gewoon daadwerkelijk tables te gebruiken zoals @nielsvdwal al aangaf.
Dit doet precies wat je wilt zonder alle extra ellende van floats, blocks en de hele santekraam.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Maar hoe dan ook, mijn tabelcel moet zich aanpassen aan mijn icoon + variabele naam lengte + evt vaste actie-button breedte.
Actiefste leden van de maand
