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: 16Questions: 1Answers: 0
edited June 8 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: 56,483Questions: 1Answers: 8,964 Site admin

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

    Thanks,
    Allan

  • BalkothBalkoth Posts: 16Questions: 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: 16Questions: 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: 56,483Questions: 1Answers: 8,964 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: 16Questions: 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: 56,483Questions: 1Answers: 8,964 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: 16Questions: 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: 56,483Questions: 1Answers: 8,964 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: 16Questions: 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: 56,483Questions: 1Answers: 8,964 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: 16Questions: 1Answers: 0

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

Sign In or Register to comment.