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

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

BalkothBalkoth Posts: 21Questions: 1Answers: 0
edited June 2022 in Free community support

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']]
});

Answers

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

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

    Thanks,
    Allan

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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.

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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...

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • BalkothBalkoth Posts: 21Questions: 1Answers: 0

    This explains the issue.

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

Sign In or Register to comment.