How to fix column adjustment of hidden table after showing it?

nivle

Link to test case: https://stackblitz.com/edit/datatables-columns-adjust-issue?file=index.html
Debugger code (debug.datatables.net): none
Error messages shown: none
Description of problem: I have a datatable set up inside a hidden container. After the datatable is done initializing, I make the container visible and then call table.columns.adjust() to fix the misaligned columns. This however just doesn't work reliably on some tables(sometimes it works, sometimes it doesn't), while on an other table it doesn't work at all. I've tried adding the responsive in the initialization, and tried table.columns.adjust().responsive.recalc(), and table.responsive.recalc().columns.adjust() but that didn't do anything. The table element has width set to 100.

In the link above, make the application screen a bit bigger, to see the issue better.
or use the application link to see it on a bigger screen...
https://datatables-columns-adjust-issue.stackblitz.io

kthorngren

Looks like you need to add style="width:100%" to the table tag as shown in this example. See if this fixes the problem for table 2 in this updated example:
https://stackblitz.com/edit/datatables-columns-adjust-issue-rdk51s?file=index.html

Kevin

nivle

@kthorngren it didn't fix anything, besides that, the issue is on both tables, they both already have width 100 as set by bootstrap class w-100, so I don't see, why you would think the issue would be solved by adding style="width:100%". On the first table I call the columns.adjust 3 times, with a timeout of 1 second between each, so you can see the change on the table after each call. Normally the columns should be fixed with one call already.

kthorngren

Seems like there is a timing issue. If I remove this code:

//$("#table1-container").addClass("d-flex");
    //setTimeout(() => {table1.columns.adjust();}, 1000 );
    //setTimeout(() => {table1.columns.adjust();}, 2000 );
    //setTimeout(() => {table1.columns.adjust();}, 3000 );
    // in this case calling it multiple times fixes it, but in some cases even that doesn't work...

And add this init event the columns.adjust() seems to work:

$("#table1").on('init.dt', function () {
  $("#table1-container").addClass("d-flex");
  $('#table1').DataTable().columns.adjust();
});

https://stackblitz.com/edit/datatables-columns-adjust-issue-rdk51s?file=index.html

I'll let you test further Let us know.

Kevin

nivle

@kthorngren nope, nothing changed, the issue is still there, being the same as calling columns.adjust() one time on the table. You can see the issue by making the app screen bigger, then its easier to see.

kthorngren

Interesting. It seems there is an interaction issue with Flexbox. I'm not familiar with flexbox but I made a change to use a settimeout in the init event I created. This shows that the container the table is in grows when columns.adjust() is called. Seems flexbox adjusts after the columns.adjust() is called.

Maybe @allan or @colin can help with how to make this work with flexbox. The problem doesn't seem to be there if the scrolling features are turned off.

Kevin

nivle

Yes, help me @allan @colin

nivle

Yes, help me @allan @colin

allan

Sorry I've not had a chance to do a deep dive into this yet. It isn't immediately clear what is going wrong, so I'll try to make some time for it next week.

Allan

nivle

nivle

@kthorngren It seems the issue is caused by the bootstrap class "flex-md-row" on one parent div containing the table element???, after removing this class, the columns.adjust works after calling it once. Any idea why this is the case?

kthorngren

Like I said I'm not familiar with Flexbox but it sounds like flex-md-row is a responsive class. It looks like when using columns.adjust() the flexbox responsive class takes affect and adjusts the container after the columns.adjust(). They are competing functions to adjust the view. The more times you use columns.adjust() the more times the flex-md-row class runs. Eventually you get to a point where they meet - I guess its three times :-)

Kevin

nivle

@kthorngren Ok, I solved the issue, by wrapping the whole buttons section with another div, not sure why, but it works

nivle

@kthorngren However, if responsive is active, I do have to call columns.adjust() twice, any idea why that is?

kthorngren

As I mentioned previously my thought is that you have two competing responsive. functions. When you use columns.adjust() then the flexbox adjusts. So you need to call it again. Finally they come to adjust to the same width.

Kevin