Broken Scrolling? Table width grows unexpectedly!

chrishem

Link to test case: http://45.56.97.27/dt-test/
Debugger code (debug.datatables.net): https://debug.datatables.net/adudif
Error messages shown: None
Description of problem:

Hello, community! First post in the forums, and I'm very new to DataTables. So far, it's going reasonably, but I've hit an issue that I would really appreciate a bit of help with! When I initially load the page, the DataTable shows correctly. However, once I change the sort order a few times, the table begins to grow in size, and ends up pushing the columns out of view to the right.

I feel like this has to be something fairly obvious, right?

kthorngren

Thanks for the test case. There are a couple obvious issues:

First you are loading jquery.js twice. Once in line 6 (jquery/2.1.3/jquery.min.js) and the other in the concatenated include in line 13 which is loading jquery 3.3.1. You can click in the link in this line to see what is included in the file. You should load jquery.js only once. Remove line 8 unless you have a requirement for jquery 2.1.3.

You are loading conflicting Datatables.css files.The first is in line 8 and the second in line 9. To maintain version consistency remove line 9.

See if these help. If not please update your test case so we can help further.

Kevin

kthorngren

Probably the biggest issue is FixedHeader is not compatible with the scrolling functions. From the docs:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

Kevin

chrishem

Kevin,

First, thank you so much for the expedient responses!!
I removed the redundant jQuery and datatables.main.css lines. Just removing those two didn't fix the problem. I then removed (commented out) the fixedHeader option, and shift-reloaded the page. The issue remains despite all three changes.

Updated Debugging: https://debug.datatables.net/orovan

colin

I'm not seeing that in the test case you linked to. Have you resolved the issue?

Colin

chrishem

No, I'm still having the issue.
Example test case: http://45.56.97.27/dt-test/

When I change the field sort (clicking on any of the column headers), the table width grows past the ability to view it fully on the screen, despite having the table width set to 100%. I even tried it in Chrome's Incognito mode, to ensure it wasn't a caching issue. Same behavior in Firefox as well.

kthorngren

Strange, I don't see the issue either. I tried sorting each column multiple times. I tried sorting multiple columns at once. The table stays the same size. Are there particular steps that you use to show the problem? Maybe you can provide a video capture so we can see what you are seeing.

Kevin

chrishem

Colin: no, the issue is still present. I've tried shift-reloading the page, and even opened the page in Incognito mode in Chrome. I also tried the page in Firefox. It behaves the same way each time.

Here's a screencap of my observation: https://vimeo.com/558056996

And a link to the page itself: http://45.56.97.27/dt-test/

tangerine

I'm seeing what @chrishem is seeing. Any sorting click expands the table to the right (Chrome).

kthorngren

I'm using an older version of Chrome on the Mac (Version 90.0.4430.93 (Official Build) (x86_64)). If I get a chance I'll try upgrading.

Kevin

allan

Chrome 91 Linux here and I'm seeing it as well.

If you modify your custom CSS a little the problem will be resolved:

table, th, td {
    /* border: 1px solid black; */
    /* padding: 5px; */
    width: 100%;
    height: 100%;
}

table.display {
    /* border: 2px solid red; */
    align: top;
}

I've comment out the parts you need to remove. They are causing issues with the column width calculations.

Allan

chrishem

@allan -- confirmed fixed! Thank you so much!!