Data Tables 1.13.4 Giving fixed-width headers?

Yokomoko

We're currently experiencing issues after updating from version 1.12.1 of DataTables to 1.13.4 where the column widths are a bit funky, regardless of the autowidth parameter being true or false.

Is there anything obvious that would do this that I'm missing? In 1.13.4 it is setting "style=width:76px;" for example, whereas before it was not doing this?

Yokomoko

I've had to set the column widths to auto for every column, is that right? Seemed to do that automatically before.

var columnLength = $("#jobDataThead tr th").length;
var columnData = [];
for (var i = 0; i < columnLength; i++) {
    columnData.push({ "width": "auto" });
}

    "columns": columnData,

allan

It will set a width to try and keep the columns the same width when you change the page in the table. Otherwise the jumping around of column widths is really jarring.

Allan

Yokomoko

This seems to be behaving very oddly. See the attached, the MakeModel column is tiny and going over several lines, but the "Planned Driver" column is double the size it needs to be? I've checked and there is no hidden spaces. Also the "Location" and "Destination" columns, we trim these down to a certain length in code so many of them end with "...", but there's about 20% more space than it needs?

Data redacted due to being on a live customer with live details.

Yokomoko

It seems it could possibly be down to the colspan=2 that is on Driver/Vehicle for certain rows (the whited out column). Removing the colspan makes it look better, but then obviously the driver column is then super long..

allan

It seems it could possibly be down to the colspan=2 that is on Driver/Vehicle for certain rows

DataTables doesn't support colspan or rowspan in the tbody. How are you doing that?

Allan

kthorngren

What styling options do you have applied to the table? You might need to add nowrap to the table tag as documented in the Default Datatables Styling docs.

we trim these down to a certain length in code so many of them end with "...", but there's about 20% more space than it needs?

How are you doing this?

Possibly Datatables doesn't know that the data is trimmed and is using the original data to calculate the width. Maybe try the ellipsis plugin

It seems it could possibly be down to the colspan=2 that is on Driver/Vehicle for certain rows

Datatables doesn't support colspan or rowspan in the tbody. See the HTML requirements doc for more details.

To help troubleshoot please provide a link to your page, PM Allan with the info to keep it private. Or build a simple test case the replicates the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Yokomoko

The trimmed data is trimmed in the server-side and populated in the table, so DataTables wouldn't know of the full length of data. I will consider the ellipses plugin though.

We are using colspan by adding a hidden <td> with display="none" to any that require a colspan as it was a fairly basic requirement for our needs.

I'll try the nowrap class, as we aren't currently implementing that.

Yokomoko

The ellipses plugin just plain didn't work easily for us, since we had <span> tags etc. within the cells, not escaping the contents kinda worked but it still broke the HTML because it was trimming off too much. But it appears that the nowrap class is hopefully working Thanks

allan

Yeah, ellipsis is string based, so it doesn't work with HTML tags. I need to come up with a better solution sometime. Good to hear that nowrap does the job though.

Allan