1.10.21: Headers not lining up properly with sorting_desc_disabled or sorting_asc_disabled

Loren Maxwell

I upgraded a couple of weeks ago to the most recent release of DataTables and the extensions, and since then I've noticed there's something that doesn't line up when the classes sorting_desc_disabled and sorting_asc_disabled are applied to the headers.

I'm currently using Bootstrap 4.5.0, but I've reverted back to 4.4.1 and 4.1.3 and the problem persists.

Link to test case:

https://ghsfha.org/w/Special:SchoolIndex

Debugger code (debug.datatables.net):
None
Error messages shown:
None
Description of problem:

Notice the columns going from left to right are correct until the Loss column, which has the class sorting_desc_disabled.

To duplicate:
1) Click the Loss column. The sorting_desc_disabled class is removed and the ordering icon appears correctly, however now the Win column has the sorting_desc_disabled class applied and its header no long lines up.
2) Click the Win column and the problem reverses again.

I've tried many tables on my site, both with and without scroller, with and without table-sm, and with enabling only asc sort, desc sort, full sort, and no sort.

It occurs every time there's a column with sorting_desc_disabled or sorting_asc_disabled applied.

Loren Maxwell

For convenience, I'm adding a case from the DataTables site:
http://live.datatables.net/pomeyuzo/1/edit

To duplicate:
1) Initially the table is fine
2) Change the JS from "orderSequence": [ "asc", "desc" ] to "orderSequence": [ "desc", "desc" ] or "orderSequence": [ "asc", "asc" ] to disable sorting in some direction
3) Sort by the Age column and then sort by any other column and notice that when the class sorting_desc_disabled or sorting_asc_disabled is applied to the Age column, the column header is no longer aligned

colin

Thanks for the test case - I'm not sure if I'm missing something, but it seems to work for me - see video here. Please could you take a look and see if I'm doing something wrong.

Colin

Loren Maxwell

Thanks, @collin,

The video works the same as the test case, but I'm surprised the header text should change position.

Perhaps a better demonstration of what I'm referring to can be seen on my page (it takes a couple of seconds to load):
https://ghsfha.org/w/Special:SchoolIndex

Notice how initially the sort icon is on sitting on top of the "Loss", "Tie", etc., column text.

When you click on "Loss", the text shifts into what I'd consider the proper place but sorting_asc_disabled is now applied to the "Win" column and now that icon is sitting on top of the "Win" text.

Also, it seems like when using Scroller, this spills over into the column header width so that they don't match the table with the actual data, but I can't find an example offhand . . .

allan

Yup - looks like a bug there I'm afraid. I've just committed a fix and it will be in the nightly shortly.

Regards,
Allan

Loren Maxwell

@allan -- There's still something slightly off when using Scroller and the sorting_disabled class applied.

Here's a test case from my webpage, although note that you might have view this page with a narrow browser window to see what I'm referring to:

https://ghsfha.org/wiki/index.php?title=Special:DatabaseHome&view=coach

When using Scollerm, the sorting_disabled class causes the column headers to be misaligned because the columns where it is applied are too short.

When I manually remove the sorting_disabled class from that column header everything lines back up.

In the css itself, when I remove these references, everything lines up:

            &:not(.sorting_disabled) {
                padding-right: 30px;
            }

allan

I think this might actually be a problem with the use of multiple header rows - for example the first cell has 30px padding right on the top row, but not on the second row.

I'm not immediately sure how to handle that in DataTables, other than to add 30px padding on every cell regardless. Alternatively, you could manually add a suitable class to add the 30px padding and less (looks like 20px) to make sure the padding is the same over the vertical alignment of cells. But the wheels will come off that with colspan, hence I'm thinking 30px always might be required...

Allan

Loren Maxwell

Thanks, @allan, I didn't even pay attention to the top row at all when troubleshooting . . .

When you say:

"I'm not immediately sure how to handle that in DataTables, other than to add 30px padding on every cell regardless . . . I'm thinking 30px always might be required..."

Are you considering changing Datatables to include that? Or was that a suggestion for me to do on my tables?

I can do that for my tables, but I can also wait if there's a broader solution you were thinking of implementing.

allan

I'm not sure yet to be honest! It would be nice to avoid doing it if possible, but I currently don't see how we can. I'm going to have to think on it a bit.

Allan