Table goes outside of flex breaking things

Table goes outside of flex breaking things

MadBoyEvoMadBoyEvo Posts: 119Questions: 38Answers: 0

Link to test case:

https://codepen.io/MadBoyEvo/pen/RwpwKNb

Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

The codepen is a bit big, but it's because I wanted to make sure fixing one thing doesn't break the other. When you open up the codepen you have tabs. Once you switch the tabs (they resize on switch) the table doesn't stay within flex and overflows. Not always, not all of them, but some. It could be the first two tables are ok, and then 3rd one goes outside of flex.

It mostly happens when table is within tab and tabs are within section (Results). The problem is - once I start fixing "Section" the sections below break and they must maintain this functionality (the way they look now).

So is there anything I could do about DataTable respecting it's boundary?

Each table is wrapped in FlexElement which is flex-basis:100%.

    <div class="flexElement overflowHidden">
                                        <table width="100%" id="DT-fnuzpkoI" class="dataTables display compact">

I tried a lot of different combinations, moving flexParent class (which is basically display:flex) and flexElement, but one thing fixes, the other things break, so the best would be if I could somehow force Table to just respect flex and stop going out of boundaries :wink:

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited May 2021

    Some of your columns like Path in the Top50SelfDuration table are long which causes the columns to be a long minimum width. Here are some options:

    1. You can use a renderer to create ellipsis like this example.
    2. Use scrollX to enable horizontal scrolling.
    3. Use Responsive to hide columns when they don't all fir.
    4. Experiment with CSS like word-wrap.
    5. Change the ellipsis example to break words or reformat the long cells in a way you want.

    Kevin

  • MadBoyEvoMadBoyEvo Posts: 119Questions: 38Answers: 0

    Responsive is enabled and it doesn't kick in for those that "fail" to resize. Enabling word-wrap doesn't change anything. Enabling scrollx doesn't change anything (it doesn't kick in). That means the table is unaware of the boundaries - hence my question how I could improve it :-)

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Add max-width: 100%; to your flexElement class:

                .flexElement {
                    flex-basis: 100%;
                    max-width: 100%;
                }
    

    I don't see a way to clone the Pen, so you'll probably need to add that in yourself.

    Allan

  • MadBoyEvoMadBoyEvo Posts: 119Questions: 38Answers: 0

    That's great! I knew I was missing something. Thank you so much! Oh well, wasted 3 days ;-D

    Btw you just press CTRL+S on the existing CodePen and it will save under your name (as long as you have an account).

This discussion has been closed.