When using BS4 with Row Reorder JS, Table Changing size when click on Row

dclindner

Hi, I have a problem.

When (JS - dt-1.10.21/rr-1.2.7) is used, and a user clicks on a table row, the table visibly changes size. This seems to be related to the vertical scrollbar, which appears when the row is clicked and disappears when the mouse button is released. When the scrollbar is present prior to a click, the scrollbar seems to change size when the row is clicked, although the table no longer appears to change size. I assume it visibly changes because of the appearance of the scrollbar.

If I disable Row Reorder in the JS configuration, the problem persists. If I remove the JS row reorder script file, it no longer demonstrates the problem.

The JS configuration is:

    var table3 = $('#players-table').DataTable({
        responsive: true,
        searching: false,
        rowReorder: {
            selector: 'tr'
        },
        columnDefs: [
            {
                targets: [0],
                visible: false
            }
        ]
    });

Is there a way to prevent this visual distraction? Is there some hint how I might locate the problem?

Thanks!

dclindner

Update: This only seems to happen when I'm using the "table-sm" bootstrap class for tighter rows. This class changes the padding from 0.75rem to 0.3rem.

So, it's a relationship between the padding and the JS Row Reorder script. I prefer the tighter rows so if there is anything more anyone can add, that would be great.

dclindner

Problem Solves. The Row Reorder CSS seems to have been the cause. Once I changed it to the latest version, all worked properly.