Broken Scrolling? Table width grows unexpectedly!

Broken Scrolling? Table width grows unexpectedly!

chrishemchrishem Posts: 5Questions: 1Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736
    edited June 2021

    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

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    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

  • chrishemchrishem Posts: 5Questions: 1Answers: 0

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

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

    Colin

  • chrishemchrishem Posts: 5Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    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

  • chrishemchrishem Posts: 5Questions: 1Answers: 0
    edited June 2021

    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/

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • chrishemchrishem Posts: 5Questions: 1Answers: 0

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

Sign In or Register to comment.