Table column headers alignment issue
Table column headers alignment issue
cj1005
Posts: 142Questions: 45Answers: 1
in DataTables
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
This question has an accepted answers - jump to answer
Answers
It looks like the table shown with the
Select Itemsbutton is clicked is showing a Datatable that was initialized while hidden. If this is the case then usecolumns.adjust()after the Datatable is show so Datatables can recalculate the column widths based on the width of the container its in.Kevin
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
The problem is when the table is not visible it has no way of calculating the width of the container it is in.
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
This is perfect, as I can set a global function to auto-adjust all table columns headers when within a tab.
Thank you