Table goes outside of flex breaking things

MadBoyEvo

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

kthorngren

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

MadBoyEvo

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 :-)

allan

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

MadBoyEvo

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).