[CSS] Horizontaal scrollen table

[ZeroXT]

Ik probeer een table in de vorm van een flex container horizontaal te scrollen wanneer er meer gegevens zijn dan er op het scherm past.

Wanneer het scherm kleiner wordt, zal een horizontale scrollbar weergegeven moeten worden. Dit lukt al met de overflow-x property. Echter is de scrollbar niet actief waardoor deze functie alsnog niet werkt.

Ik heb hier een gestripte voorbeeld:
https://jsfiddle.net/af0asegh/

Hier heb ik een versimpelde versie gemaakt met een echte table.
https://jsfiddle.net/Lx6uytLv/

Het lukt me niet om deze te combineren met het origineel. Heeft iemand enig idee?

[CurlyMo]

Ik lees even mee.

Mijn laatste kennis in webdevelopment is dat je tabellen gebruikt waar ze goed in zijn en niet voor opmaak. In dit geval lijkt me echter het tegenovergestelde waar. Div's zijn niet bedoeld om gestructureerde data in rijen en kolommen weer te geven, want daar heb je weer een tabel voor.

Ik ben vooral benieuwd waarom er dus niet gewoon voor een tabel wordt gekozen? Vooral als je doel is om horizontaal scrollen te gaan ondersteunen i.p.v. het herordenen van je divs toestaan. Dat laatste is wat ik ken als het voordeel van een flex container.

[ZeroXT]

Dit is een versimpelde versie. In de volledige versie wordt functionaliteit gebruikt die niet ondersteund (of met teveel omwegen) in tables. Dat is de reden waarom er nu gebruik gemaakt wordt van divs. De discussie is momenteel niet waarom ik tables moet gebruiken ipv divs.

Heeft iemand een idee hoe ik dit werkend kan krijgen in de huidige structuur?

[CurlyMo]

ZeroXT schreef op dinsdag 27 maart 2018 @ 13:58:
In de volledige versie wordt functionaliteit gebruikt die niet ondersteund (of met teveel omwegen) in tables.

Opnieuw voor mijn lering. Kan je hier een voorbeeld van geven?

ZeroXT schreef op dinsdag 27 maart 2018 @ 13:58:
De discussie is momenteel niet waarom ik tables moet gebruiken ipv divs.

Je vraagt het wel op tweakers. Daar gaat het altijd ook over de basiskeuzes die je maakt

[ZeroXT]

CurlyMo schreef op dinsdag 27 maart 2018 @ 14:00:
Opnieuw voor mijn lering. Kan je hier een voorbeeld van geven?

Als je wilt, dan kan ik je een PM sturen met daarin een aantal voorbeelden. Gelieve hier on topic te blijven.

Dus, nogmaals, heeft iemand een idee hoe ik dit werkend kan krijgen in de huidige structuur?

[CurlyMo]

ZeroXT schreef op dinsdag 27 maart 2018 @ 14:04:
[...]

Als je wilt, dan kan ik je een PM sturen met daarin een aantal voorbeelden. Gelieve hier on topic te blijven.

Dus, nogmaals, heeft iemand een idee hoe ik dit werkend kan krijgen in de huidige structuur?

Punt is dat je box en content niet beperkt zijn in hun breedte en daardoor mee schalen met hun inhoud. Terwijl hun maximale breedte waarschijnlijk 700px is. Net zoals de container waar ze in zitten. De container kan niet scrollen, dus je kan tenminste de content of box ook een max-width van 700px geven. Daarna moet je zorgen dat je kolommen niet mee schalen met de maximale breedte van je box / content, maar schalen naar de breedte van hun inhoud. Anders zal er nog geen overflow ontstaan.

Zoiets dus:

Cascading Stylesheet:

.box {
   width: 500px;
   overflow: auto; 
}
  
.td {
   min-width: 75px;
}

[incaz]

Volgens mij zit het hierin:

Cascading Stylesheet:

.table [class*='td'] {
  overflow: hidden;
  text-overflow: ellipsis;
}

waarmee je in feite aan de browser aangeeft dat de td's geen eigen minimale breedte meer hebben: je biedt opties om ze zo klein te maken als mogelijk (behalve de padding en de ellipsis.)

Oplossing: je tabelcellen een min-width geven. Een redelijke manier lijkt te zijn om elk van de flex-x classes een min-width van x em te geven. (Dus flex-4{ min-width: 4em;} )
Wellicht heb je ook de flex-basis nog nodig al lijkt dat op het eerste gezicht niet zo.

Maar... hoe off-topic ook: dit is een constructie waarbij je geen kolomverbanden hebt. En de kans is dan ook aanwezig dat de kolommen in een onvoorziene situatie uit de pas gaan lopen, als er ergens een item breder is dan verwacht. Het is een vrij complexe structuur en de truc van css is meestal om complexe dingen simpeler te maken.
(Ook de testcase kan nog een stuk simpeler, en dat versimpelen brengt je richting de oplossing.)

[DJMaze]

Cascading Stylesheet:

.container {
    overflow: auto;
}

[CurlyMo]

DJMaze schreef op dinsdag 27 maart 2018 @ 16:24:

Cascading Stylesheet:

.container {
    overflow: auto;
}

Ik denk niet dat hij daar de scrollbar wilt.

incaz schreef op dinsdag 27 maart 2018 @ 15:48:
Volgens mij zit het hierin:

Cascading Stylesheet:

.table [class*='td'] {
  overflow: hidden;
  text-overflow: ellipsis;
}

waarmee je in feite aan de browser aangeeft dat de td's geen eigen minimale breedte meer hebben: je biedt opties om ze zo klein te maken als mogelijk (behalve de padding en de ellipsis.)

Hier de min-width kan inderdaad ook. Je zult alleen nog altijd moeten aangeven in welke div je dan je scrollbar wilt zien. Je zult deze suggestie dan dus nog moeten aanvullen met:

Cascading Stylesheet:

.box .content {
   overflow: auto;
   width: 700px;
}

[ Voor 14% gewijzigd door CurlyMo op 27-03-2018 17:47 ]

[incaz]

@CurlyMo, die x-overflow: scroll; staat al op de .table class. Dus daar verschijnt de scroll balk (zie eerste jsfiddle.)
En als je dan de min-width op de elementen aangeeft, dan krijg je ook werkelijk een scroll-mogelijkheid.

[CurlyMo]

incaz schreef op dinsdag 27 maart 2018 @ 18:03:
@CurlyMo, die x-overflow: scroll; staat al op de .table class. Dus daar verschijnt de scroll balk (zie eerste jsfiddle.)
En als je dan de min-width op de elementen aangeeft, dan krijg je ook werkelijk een scroll-mogelijkheid.

Klopt, maar zodra je de min-width toevoegt schaalt de tabel mee, waardoor je alsnog je overflow-x onderuit haalt. Probeer het maar

[incaz]

CurlyMo schreef op dinsdag 27 maart 2018 @ 18:08:
[...]

Klopt, maar zodra je de min-width toevoegt schaalt de tabel mee, waardoor je alsnog je overflow-x onderuit haalt. Probeer het maar

Dat zal me leren om te simpele test cases te gebruiken... ik had de hele container eraf gesloopt ( https://jsfiddle.net/af0asegh/79/ ) en dan werkt het, maar als het genest is in een andere flex-container, dan gaat het alsnog mis.

Maar... met jouw toevoeging krijg ik het ook nog niet voor elkaar eigenlijk.

[CurlyMo]

incaz schreef op dinsdag 27 maart 2018 @ 18:23:
[...]
Maar... met jouw toevoeging krijg ik het ook nog niet voor elkaar eigenlijk.

https://jsfiddle.net/af0asegh/83/

Raar, dit werkt hier.

[ Voor 22% gewijzigd door CurlyMo op 27-03-2018 18:29 ]

[ZeroXT]

CurlyMo schreef op dinsdag 27 maart 2018 @ 18:27:
[...]

https://jsfiddle.net/af0asegh/83/

Raar, dit werkt hier.

Nee ook dat werkt niet. Je krijgt wel een horizontale scrollbar, maar als je het scherm kleiner maakt dan kan je niet meer volledig naar rechts scrollen.

Ik heb inmiddels het voorbeeld werkend zoals ik het wil hebben:
https://jsfiddle.net/af0asegh/87/

Echter is dit zonder de property "display: flex" op de .container. Zodra je die weer toevoegt, dan breekt de functionaliteit.

De display flex hoort wel op de container. Is een horizontale scrollbar dan niet mogelijk met display flex?

[CurlyMo]

ZeroXT schreef op dinsdag 27 maart 2018 @ 18:49:
[...]


Nee ook dat werkt niet. Je krijgt wel een horizontale scrollbar, maar als je het scherm kleiner maakt dan kan je niet meer volledig naar rechts scrollen.

Ik was je padding vergeten van de width af te trekken:

Cascading Stylesheet:

.box .content {
   padding: 20px;
   overflow: auto;
   width: 660px;
}

https://jsfiddle.net/af0asegh/88/

[ZeroXT]

Ook dat lijkt hier niet te werken in Chrome. Zet je scherm maar eens op 300px en probeer eens helemaal naar rechts te scrollen. De property "display: flex" op de .container weghalen, dan werkt alles maar is in dit geval niet de juiste oplossing.

[ Voor 31% gewijzigd door ZeroXT op 27-03-2018 18:56 ]

[DJMaze]

ZeroXT schreef op dinsdag 27 maart 2018 @ 18:54:
Ook dat lijkt hier niet te werken in Chrome. Zet je scherm maar eens op 300px en probeer eens helemaal naar rechts te scrollen.

Duh, als je een vaste width meegeeft van 600px is die natuurlijk breder dan jouw 300px scherm.
Gebruik dan max-width: 100%

[ Voor 4% gewijzigd door DJMaze op 27-03-2018 18:58 ]

[ZeroXT]

DJMaze schreef op dinsdag 27 maart 2018 @ 18:57:
[...]

Duh, als je een vaste width meegeeft van 600px is die natuurlijk breder dan jouw 300px scherm.
Gebruik dan max-width: 100%

Maar dat stond niet origineel in de fiddle. Check deze:
https://jsfiddle.net/af0asegh/87/

[Ramon]

Als je de .table een vast breedt geeft dan kan je gewoon display: flex; op de .container zetten.

Volgens mij komt dat gewoon omdat als je flex gebruikt onderliggende elementen zich gaan zitten aanpassen.

[incaz]

Maar de wens lijkt me om het mee te schalen? Als je alles een vaste width geeft heb je flex niet nodig. (Maar als je zoveel flex gebruikt, dan weet de browser dus niet meer wanneer het wel en niet moet overflowen en dan wordt het lastig.)

Ik zou zelf denk ik kijken naar andere oplossingen, kijken of er flex-declaraties wegkunnen of dat je in bepaalde situaties de width vast kunt zetten met javascript.

[CurlyMo]

ZeroXT schreef op dinsdag 27 maart 2018 @ 18:54:
Ook dat lijkt hier niet te werken in Chrome. Zet je scherm maar eens op 300px en probeer eens helemaal naar rechts te scrollen. De property "display: flex" op de .container weghalen, dan werkt alles maar is in dit geval niet de juiste oplossing.

Als je onderstaande nu gelijk doet Dat is het doel van ons hier. Je in de goeie richting bewegen. Aan jou om het naar jouw wensen af te maken. Volgens mij ben je er dus.

ZeroXT schreef op dinsdag 27 maart 2018 @ 19:02:
[...]
Maar dat stond niet origineel in de fiddle. Check deze:
https://jsfiddle.net/af0asegh/87/

[ZeroXT]

CurlyMo schreef op dinsdag 27 maart 2018 @ 19:08:

Als je onderstaande nu gelijk doet Dat is het doel van ons hier. Je in de goeie richting bewegen. Aan jou om het naar jouw wensen af te maken. Volgens mij ben je er dus.

Ik ben er bijna. De display flex moet nog op de container. Maar ben al verder dan ik was.

[CurlyMo]

ZeroXT schreef op dinsdag 27 maart 2018 @ 19:30:
[...]
Ik ben er bijna. De display flex moet nog op de container. Maar ben al verder dan ik was.

Dan pak je mijn voorbeeld aangevuld met het commentaar hier gegeven.

Ik snap overigens niet waarom alles geflexed moet zijn?