Headers getting misaligned when loading data with ajax

thosefacts

Hi. I recently ran into an issue with headers being missaligned with the columns below. I have tried most (all?) of the things I have come across on the forum:

table.columns.adjust(); <- no effect

table.DataTable { width: 100% !important; } <-- no effect

autoWidth: false, <-- well, column headers get a fixed size, doesn't really solve the problem.

I'm using Ajax to get the data from the server, so in a desperate move, I decided to copy the result set, put it into a variable, removed the ajax call and used data: testdata. This will fix the issue I am having with the column headers, but it's not really a solution to the overall problem with using an Ajax call to load the data.

Have anyone else come across this issue and have any pointers on how to resolve it?

I did setup a live example, but I have yet to setup any Ajax call on it: https://live.datatables.net/yufifiqu/

allan

Are you using an old version of DataTables perhaps? What version are you using? Your example doesn't appear to demonstrate the issue? If you need an Ajax example to base your own on to demonstrate the issue, some starter ones can be found here.

Allan

thosefacts

Hi Allan. I'm running DataTables 2.1.8, ColReorder 2.0.4 , Responsive 3.0.3 and Select 2.1.0 .

No, the example does not demonstrate the issue, I tried with the examples you showed, but can't reproduce the issue with serverSide: true there either.

I find it kinda odd that it only happens when I process the data through an Ajax call and not otherwise. If I drag a column, it will trigger a resize for all the header columns correctly.

kthorngren

Make sure to use the proper Datatables style integration files for the styling framework you are using. The Download Builder is the easiest way to get the proper files.

Kevin

thosefacts

Hi Kevin, thank you for the input, already used it when setting up the table the first time around.

kthorngren

It's hard to say what the problem might be without seeing it. As a workaround try using columns.adjust() in the draw event. Don't chain draw(). Does this help?

Kevin

thosefacts

As I said in my initial post, columns.adjust() does not work sadly. It will adjust the columns, but not correctly. For know I found a workaround by tying into the draw event:

table.on('draw', function () { table.colReorder.move(1, 1); });

This will correctly adjust the header columns to be aligned with the row content.

kthorngren

As I said in my initial post, columns.adjust() does not work

You did but there was no mention of when it was being used which is why I offered a more specific suggestion

table.on('draw', function () { table.colReorder.move(1, 1); });

Interesting. Does the column width change significantly when requesting new data?

Sorry I'm out of suggestions. Maybe Allan will have something else.

Kevin

thosefacts

Interesting. Does the column width change significantly when requesting new data?

Yes, the dataset have some gaps, a column may not have any data for a specific page, while on the next page it has. I haven't set min-width, max-width is 300px with ellipsis capping the text.

allan

Could you try the nightly version of DataTables please? That might resolve the issue if you are using server-side processing. This fix has not yet made it to a release (it will soon, but hasn't yet). I'm not sure if that is the issue you are running into though.

Allan

thosefacts

Hi Allan. Here is some input after testing with the nightly version:

If I start out with no values the column width will be the width of the header label. Then it will grow up to the max-width I have specified when encountering data. It will not shrink again when there are none or short values to display for that column.

The columns that contain no values will shrink to the width of the label again when I try drag a column, causing a bit of a jumble.

I'm not sure if you have a nightly of colreorder I should be using at the same time?

thosefacts

I should add: it fixes the issue with misalignment, but it causes issues with column reordering.

allan

Some progress at least .

If you could link to a test case showing the remaining issue I'll look into it.

I don't think there is anything unreleased in ColReorder that would effect what you describe.

Allan