DataTables width

Avalanche7592

I am having a problem with the datatables width. If I revert back to version 2.1.8 the width of the table is fine. With the latest versions, since 2.2.0 and up to 2.2.2, it is not getting the width correct and there is a horizontal scroll bar at the bottom and the last column has buttons in it which are getting half cut off unless I scroll over.

I tried uploading the config with the datatables debugger but it never finished. It is a table with 10 columns and the last two columns have buttons in them. The data is loaded using ajax.

Avalanche7592

Here is a screen capture of the issue. If you watch, as I resize and drag the browser window to the right to make it bigger, there is enough space, but the datatable is redrawing and still clipping the last column off.
As I drag it left and make the window smaller, it is redrawing up until it is at the minimum size then stops redrawing.

kthorngren

Previously there was a recommendation to add style="width:100%" to the table for Datatables to perform width calculations. I believe recently Datatables now adds this attribute to the table tag when initialized.

See this example for the current behavior.

I believe the expectation now is to control the table width by setting the width of the .dt-container div.

This change might be interfering with something you have setup. Can you provide a link to a test case showing the issue so we can take a look? Possibly just build a simple example with an example of your table tag and container that Datatables is in would be enough.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Avalanche7592

I have tried to create a test case, but have not been successful. My data comes from ajax and may be related.

I have looked through the changes between 2.1.8 and the latest and found the problem in the "function _fnColumnSizes"

If I update the code to the following, it works correctly:

if (settings.oScroll.sX) {
    cols[i].colEl.css('min-width', 0);
}

I think this is the correct solution to set the min-width to zero.

allan

If you can provide me with a test case showing the issue, I can take a look into it. The table width for scrolling is easily the most complex part of DataTables, just because there are so many nuances - this could have other adverse side effects - I'm not sure!

Allan

Avalanche7592

I tried to create a very simple case but I could not do it with live.datatables.net.

I created a test solution which shows the exact problem here: https://github.com/ejohnson-dotnet/TodoApp

Clone this git repo and open the solution with Visual Studio or Visual Studio Code. You will need dotnet 9.0 SDK installed.

Simply build and run the solution to see the issue. Resize the window and the last column gets cut off even when it has enough space.

It is using the minified version of DataTables.net 2.3.2 in the folder wwwroot/libs/datatables.net/js. Find the code colEl.css("min-width",a) and change it to colEl.css("min-width",0) and the columns gets resized properly.

allan

Many thanks. Debugging a .NET app is beyond what I can do just at the moment (I'm away from my office for a bit), but I will attempt to look into it next week.

Allan