DataTables width
DataTables width

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.
Answers
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.
Previously there was a recommendation to add
style="width:100%"
to thetable
for Datatables to perform width calculations. I believe recently Datatables now adds this attribute to thetable
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
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:
I think this is the correct solution to set the min-width to zero.
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
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 tocolEl.css("min-width",0)
and the columns gets resized properly.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
I'm not having much luck getting this to run on Linux with .NET 9. Are you able to put the app up somewhere so I can just take a look at the generated output? Or perhaps the docker option will work - it says to run some scripts in
etc
, but there is no such dir in in the repo. If you have that, perhaps you could commit that?Edit: I was looking at the wrong level. I see
etc
now and will spend a bit more time on it.Allan
Didn't get anywhere with docker.
Managed to run it in the end.
The issue is with the "Action" column - the button is being dynamically added after the DataTable is drawn. I'm not 100% sure what is adding it though. It looks like it might be part of the Volo Adp package?
The issue is that since it is being added after the table is drawn, DataTables is calculating column widths with no data in that column. Then Adp (or whatever) is drawing it in resulting in increasing the column width, thus knocking everything out. The column widths are right up until the point that extra HTML is added.
Ideally the HTML should be returned by the rendering function, but as I say, I don't really know how that is working -
grep
ing the code suggests it is in the Adp dlls, so I can't debug that further.A workaround, without changing how that action button is drawn is to use
columns.contentPadding
to insert something into the column for the width calculations. AddingcontentPadding: 'mmmmmmm'
just after therowAction
object appears to work okay for me.Allan