Sort Order indicators in 1.12 causes columns to change width after it has been rendered

Balkoth

In 1.11 the width of the columns was fixed once the table is displayed, now there is a delay between when the table is drawn, then the indicators load in and the width of the columns changes once again. This looks visually jarring.

Here is a simple sample that replicates what i am using:

CSS:

#table-test {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: 1400px;
    table-layout: fixed;
}

#table-test td, #table-test th {
    white-space: pre-line;
    text-overflow: ellipsis;
    overflow: hidden;
}

#table-test th:nth-child(1) {
    width: 260px;
}

#table-test th:nth-child(2) {
    width: 100px;
}

#table-test th:nth-child(3) {
    width: 50%;
}

#table-test th:nth-child(4) {
    width: 50%;
}

HTML:

<table class="table table-bordered table-hover" id="table-test">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bla1</td>
            <td>Bla2</td>
            <td>Bla3</td>
            <td>Bla4</td>
        </tr>
    </tbody>
</table>

Javascript:

ContentDataTable = new DataTable('#table-test', {
    order: [[0, 'asc']]
});

allan

I'm not seeing it here can you link to a test case showing the issue please?

Thanks,
Allan

Balkoth

Yeah, i could not replicate it there either, but it's definitely in my local site. Happens when i switch to 1.12. Maybe there are other things like bootstrap coming into play. I will try to provide a sample showing the issue as soon as i can, but not before next week.

Balkoth

It's not as easy to reproduce in an isolated project as i hoped, so for the time being i leave some sample footage showing the problem here. In each video i refresh the page three times. While in 1.11 you can see that the table loads in with no size changes, in 1.12 the size of the columns changes once displayed.

1.11: https://www.veed.io/view/e50052d9-b4c0-44f4-98fd-7327605b04f1
1.12: https://www.veed.io/view/b02cde6e-f0fb-44fc-aefa-5526105c6636

allan

Thanks for the videos - I can indeed see it there. I'm afraid I don't know what is causing that without being able to debug it though. Hopefully you'll be able to give me a test case showing the issue at some point.

Allan

Balkoth

I have put together a simple enough sample showing the problem. I do not want to post it here, because of reasons. How can i get you the zipped project?

I also found that the crux is setting the language in the extend function:

$.extend($.fn.dataTable.defaults, {
    language: { url: 'https://cdn.datatables.net/plug-ins/1.12.1/i18n/de-DE.json' },
    autoWidth: false,
    info: false,
    paging: false,
    dom: 'lrtip'
});

If i comment the language out, everything loads like in in 1.11.5, if i leave it in there is the delay shown earlier.

allan

Ah - Using the language.url option will cause an Ajax call to be made to get the data, during which time the table is just in its plain HTML state.

Are you using our CSS files? You could try adding "dataTable" as a class to the table to see if that helps - DataTables would do that normally after the language has loaded.

Allan

Balkoth

I am using this:
https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.12.1/css/dataTables.bootstrap5.min.css

So i guess thats a yes. Unfortunately adding "dataTable" does not help. Has the loading of the language changed between 1.11 and 1.12, because i always used it like this, obviously with the correct version for 1.11 even when there is no difference between the language files.

allan

No I don't think so. There was a change to the language options to allow local options to override those Ajax loaded ones, but I don't see why that would effect this. The videos aren't available any more, are you able to make them accessible again?

More likely is the CSS change for the sorting icons. Before it was a background image with padding for the header to allow it to show correctly. Now we use a UTF8 character plus CSS so there isn't any additional image download.

Thanks,
Allan

Balkoth

Apparently veed.io will delete them after 24hrs:
1.11: https://www.veed.io/view/84c9f86c-a9d7-4195-b39c-85f8959c36bb
1.12: https://www.veed.io/view/e66f72a7-4463-4841-95b7-703b061871f2

As said i have a zipped sample ready, but the editor controls seem broken, so i can not get it through the forum to you...

allan

Ah - thanks for uploading them again. I do indeed see the issue there. I suspect it will be more to do with the column width calculations than the header padding, but the zipped file would be really useful to help narrow things down.

Could you use Dropbox, Mega or some other service if the zip won't upload the forum? (I need to look into why that would be happening!).

Allan

Balkoth

I sent you a personal message with a Google Drive link, where i uploaded the showcase.

Balkoth

Just a heads up, this is still present. Removing the language option also works around the bug in this release.

Balkoth

This problem is still present in 1.13.2. It's sad that i invested so much time into figuring out what happens, posting videos of the problem and also providing a minimal repo, but nothing happens.

This bug makes using the language option in versions > 1.12 impossible, because the flickering just looks bad.

allan

Really sorry - I totally lost track of this one with everything else that was going on. I can see the issue in your test case as well.

The reason that this has started happening is that I "fixed" a related issue, which made the tables more "progressive enhancement" than before. Previously the default CSS would make space for the sorting icons in the table header, even before the DataTable was initialised.

This meant that if ordering was disabled on the table, the column widths would shift when initialised.

With 1.12 I inverted that, so the assumption was that the space for the ordering icons should only be added if ordering was enabled when the table was initialised. Thus the shift occurs at that point.

To make the behaviour the same as 1.11 (assume sorting icons will be shown) then you can simply add the following CSS to your page:

        table.dataTable thead th {
            padding-right: 26px;
        }

What would be best would be to always have the space available for the sort icons, regardless of the ordering state. I'm concerned what would happen with right aligned columns (and rtl languages - although to a lesser extent since that would just use CSS to flip the padding for the icons to the left).

Maybe right aligned columns should be like rtl and have the sort icons on the left. That might look a bit weird though... I'm going to have to think about this one a bit, rather than rushing into another change. Any thoughts yourself?

Allan

Balkoth

Thanks for the long answer and for providing a workaround.

One thing i do not quite understand is why it seems to work when i remove loading the language option. Does loading it delay the rendering long enough, that this becomes visible? As i have said earlier, when i remove the language, then i am not able to see any difference. The table loads and displays with "correct" column sizes immediatly.

Isn't it possible to not modify the column widths for the indicators at all and make the developer responsible for setting the column widths up correctly with enough space for the indicators? To be honest, i was irritated at first when i found that datatables messed around with my exact defined widths in the css.

allan

One thing i do not quite understand is why it seems to work when i remove loading the language option.

When you have the language url set the table initialisation becomes asynchronous. The Ajax request happens, the browser draws the basic HTML and then the table data is loaded and drawn.

Without the async initialisation, the browser waits until DataTables has been initialised (most of the time - there are exceptions!) and draws it fully initialised.

So it is that async gap where the browser can draw the unenhanced table that you are seeing and is causing that nasty FOUC (Flash Of Unstyled Content).

Isn't it possible to not modify the column widths for the indicators at all and make the developer responsible for setting the column widths up correctly with enough space for the indicators?

The padding is required, otherwise longer headers will overlap the sorting icons. It isn't the width of the columns that is the issue, it is the padding-right that needs to be added to make space for the sorting icons.

i was irritated at first when i found that datatables messed around with my exact defined widths in the css.

Yup - I get that. If you want exact widths, use table-layout: fixed. Otherwise, the browser (more than DataTables) will modify your defined widths to allow the content to display. DataTables attempts to draw a "worst case" table (when autoWidth is enabled) and read the column widths from that. Then it sets them to the actual table, so that column widths don't jump around when the user is paging through data (that is super annoying). But the result is that you won't have pixel level control of column widths. table-layout: fixed is how to get that.

Allan

Balkoth

This explains the issue.

I already set autoWidth: false as option and table-layout: fixed in the css.