Table column headers alignment issue

cj1005

Hi,

I'm having an issue with table column headers not aligning up in certain conditions, it only happens when I have multiple data tables, and it only happens on subsequent tables (i.e. the first table initialised is fine).

Please see my test case below:

https://www.wd4g.com/WCGateway/DTTest.wc

Instructions to find the issue: 1) Click the 'Add' button 2) Click the '2. Select Items' button 3) You should now see the column headers are not aligned correctly.

Could someone please advise what is causing this and how to correct it?

Many thanks, Chris

kthorngren

It looks like the table shown with the Select Items button is clicked is showing a Datatable that was initialized while hidden. If this is the case then use columns.adjust() after the Datatable is show so Datatables can recalculate the column widths based on the width of the container its in.

Kevin

cj1005

Thank you, Kevin

That worked......well kind of, I had to put it within a setTimeout() like so:

$('#pills-sjob-tab').on('click', function (e) {
setTimeout(function(){ sjobxTable.columns.adjust().draw() },500);
});

I'm guessing the table is still not visible at the point of clicking the button.

It would be better if the table was able to set the column size\position on init whether visible or not, as adding extra code each time I want a table to initialize inside a tab seems unnecessary, but it is a working solution.

Thanks again, Chris

kthorngren

It would be better if the table was able to set the column size\position on init whether visible or not

The problem is when the table is not visible it has no way of calculating the width of the container it is in.

I'm guessing the table is still not visible at the point of clicking the button.

It probably takes a bit of time to display the elements. Try using a timeout of 0. Not sure what you are using to show/hide the tables but if its something like Bootstrap tabs there might be a callback you can use instead. Like this example.

Kevin

cj1005

This is perfect, as I can set a global function to auto-adjust all table columns headers when within a tab.

Thank you