Flex oplossing voor 2 koloms tabel, rechter kolom scrollable

[deBennie]

Ik wil een tabel-view in CSS oplossen. De tabel-view heeft aan de linkerkant een kolom met labels. Rechts van deze kolom staat een bredere kolom met meerdere kolommen (erin). Bij smallere schermen moeten de kolommen in de rechterkolom scrollable zijn.

Nu wil ik de rijen van alle kolommen dezelfde hoogte geven. De hoogte wordt bepaald door de content.
Dus ik wil de hoogte van de rijen van de linker kolom mee laten growen met de hoogte van de rijen van de rechter kolom.
De cel met de meeste (hoogste) content bepaald de hoogte.

Kan dit uberhaubt zonder in CSS vaste hoogtes aan te geven?

Dus globaal:

code:

    <div class="tabel">
        <div class="kolom-links">
            <div class="cel">waarde</div>
            <div class="cel">waarde</div>
        </div>
        <div class="kolom-rechts">
            <div class="kolom-1">
                <div class="cel">waarde</div>
                <div class="cel">waarde</div>
            </div>
            <div class="kolom-2">
                <div class="cel">waarde</div>
                <div class="cel">waarde</div>
            </div>
            <div class="kolom-3">
                <div class="cel">waarde</div>
                <div class="cel">waarde</div>
            </div>
        </div>
    </div>

[DJMaze]

Ja hoor dat kan. Wat heb je al geprobeerd?

[deBennie]

Het probleem zit m vooral in de hoogte van de cellen. Die moet namelijk over de gehele rij (dus ook over de 2 kolommen) in hoogte meegroeien.

Heb een flex toegepast.
De wrapper is flex, de linker- en rechterkolom zijn flex met een flex direction column, de kolommen in de rechterkolom zijn flex met een height van 100%. Ik krijg m alleen niet zo dat de hoogte van de cellen meegaan in hoogte..

[DJMaze]

Teken het eens uit of toon het d.m.v. een display table wat je wil.
Ik zie namelijk nog steeds geen CSS van wat je wil

[deBennie]

DJMaze schreef op zaterdag 23 september 2017 @ 13:50:
Teken het eens uit of toon het d.m.v. een display table wat je wil.
Ik zie namelijk nog steeds geen CSS van wat je wil

Ok, ik heb een codepen: https://codepen.io/JP-2016/pen/mBOaPz

Ik wil dus dat elke rij dezelfde hoogte krijgt als de rijen links/rechts ervan.

[DJMaze]

Als je zoiets bedoelt https://codepen.io/anon/pen/PJbgzV dan kan dat natuurlijk niet in je huidige opzet.
Je moet het per rij zien, niet alles omdat links niks weet van rechts en andersom omdat ze geïsoleerd zijn van elkaar.

[ Voor 36% gewijzigd door DJMaze op 25-09-2017 10:55 ]

[deBennie]

Dit werkt wel:
https://codepen.io/JP-2016/pen/LzbovE

Je ziet dat de DIVs met de classes 'c-panel__title' een flex-grow: 1 hebben, dus die groeien mooi mee, horizontaal gezien.
Maar zodra ik de flex-grow: 1 ook op de DIVs met classes 'c-panel__subtitle' zet, dan gaat de weergave niet goed. Ook wel logisch, want wat moet nu growen tov wat? De DIVs verliezen hun relatie.

Maar dat is dus wat ik zoek, dat elke DIV/cel mag growen en dat dit horizontaal goed uitlijnd.

(zet je browsert overigens in mobile inspect, de scrollbar zal dan verdwijnen)

[deBennie]

Dit gaat ook niet goed:
https://codepen.io/JP-2016/pen/LzbovE

[DJMaze]

Ja prima, maar je gaf geen antwoord op mijn post.
Want wat moet nu precies uitlijnen?
Pak mijn voorbeeld er nou eens bij en vertel het zo dat het mij wel duidelijk is.

[deBennie]

De content moet horizontaal gezien inderdaad zo uitlijnen als in je voorbeeld. Dus als (uit jouw voorbeeld) [kolom 4, rij 2] 3 regels hoog is, dan moet [kolom 1, 2 en 3, rij 4] ook 3 regels hoog zijn.

En dan nog dat de 1e kolom vaststaat en de 3 kolommen rechts daarvan in 1 kolom staan en horizontaal kunnen scrollen

Waarom gaf je in je 1e reactie aan dat het kon, als het je niet duidelijk was wat ik bedoelde?

[R4gnax]

Zoiets nodig?

https://jsfiddle.net/1muas827/1/


Helaas gaat dat alleen lukken met vaste kolombreedtes. Maar goed; misschien dat je die nog wel gedefinieerd kunt krijgen als de lengte van je content een beetje voorspelbaar is.

[ Voor 65% gewijzigd door R4gnax op 25-09-2017 22:56 ]

[DJMaze]

deBennie schreef op maandag 25 september 2017 @ 15:28:
Waarom gaf je in je 1e reactie aan dat het kon, als het je niet duidelijk was wat ik bedoelde?

Omdat het kan, maar niet met je huidige HTML.R4gnax legt het prima uit met een table

[deBennie]

R4gnax schreef op maandag 25 september 2017 @ 22:53:
Zoiets nodig?

https://jsfiddle.net/1muas827/1/


Helaas gaat dat alleen lukken met vaste kolombreedtes. Maar goed; misschien dat je die nog wel gedefinieerd kunt krijgen als de lengte van je content een beetje voorspelbaar is.

Nee, dit is niet wat ik zoek.
De basis opzet is een 2 koloms. De linkerkolom bevat de labels. Deze linkerkolom is 25%breed.
De rechterkolom is 75% breed en bevat meerdere kolommen. Deze rechterkolom is horizontaal scrollbaar. Dus er zitten bv 10 kolommen in die rechterkolom.

Elke kolom heeft cellen en de content in die cellen is in hoogte variabel. Soms 1 regel, soms 2 of 3 regels hoog. Hoogte van content is niet voorapelbaar.

Het probleem zit m in het feit dat je blijkbaar niet de hoogte van de cellen (horizontaal gezien) mee kunt laten groeien over de andere cellen, je kunt met flex niet meerdere grows in een kolom zetten.

[deBennie]

R4gnax schreef op maandag 25 september 2017 @ 22:53:
Zoiets nodig?

https://jsfiddle.net/1muas827/1/


Helaas gaat dat alleen lukken met vaste kolombreedtes. Maar goed; misschien dat je die nog wel gedefinieerd kunt krijgen als de lengte van je content een beetje voorspelbaar is.

Wacht, ik bekeek dit vanmorgen op mn iPad, daar scrollt de hele table, ook de 1e kolom.
Ik duik later nog even in je oplossing. Thx

[R4gnax]

deBennie schreef op dinsdag 26 september 2017 @ 08:42:
[...]


Wacht, ik bekeek dit vanmorgen op mn iPad, daar scrollt de hele table, ook de 1e kolom.
Ik duik later nog even in je oplossing. Thx

Ja; sorry. Ik was nog even vergeten te melden dat dit gebruik maakt van position:sticky, wat enkel in Chrome en Firefox werkt zonder vendor-prefix.

[deBennie]

Jep, ik zag het.