Select All checkbox in table header is misaligned with table rows

[davidjb]

Using the latest datatables.net-dt and datatables.net-bs5 packages (v2.3.2), when the DataTable.render.select() checkbox is rendered, the Select All checkbox in the header is slightly out of alignment with the checkboxes in the table rows:

The cause appears to be the display of the <span class="dt-column-order"></span> element and the styling attached to div.dt-column-header, which is:

https://github.com/DataTables/Dist-DataTables-Bootstrap5/blob/b63a2add4a1dd1c84bb614d64d739b5e2994187a/css/dataTables.bootstrap5.css#L155-L158

This causes .dt-column-order to affect the layout. I see there's special handling for span.dt-column-title:empty so perhaps that needs to be extended to .dt-column-order:empty as well.

Example table:

new DataTable('#table', {
  columns: [{ orderable: false, render: DataTable.render.select() }],
  select: {
    style: 'multi', // but affects other styles like `os` too
  },
});

[AllanJard]

Per your other thread don't use both datatables.net-dt and datatables.net-bs5 at the same same time. The styles with conflict.

If that is still causing you problems, please open a thread in the forums with a link to a test case.

[davidjb]

Thanks @AllanJard. As I was mentioning in https://github.com/DataTables/Dist-DataTables-Bootstrap5/issues/12#issuecomment-3181812025 I've cleaned up my installation, but the issue persists.

Worked example: https://ty2yktsv-cuvfhhib.stackblitz.io

The issue's caused because the <span class="dt-column-order"></span> empty element is present in the DOM.

This can be worked around either with the above CSS or else to apply data-dt-order="disable" to the initial column's HTML, which prevents the <span class="dt-column-order"></span> element from being created in the DOM.

Let me know if this still needs a thread on the forums 👍

[AllanJard]

Thanks for the links. Stackblitz is refusing to load for me in FF or Chrome at the moment. I'll try again soon.

[davidjb]

@AllanJard If you've got a moment to check this again, that would be great - thanks!

[AllanJard]

I hope to try it in the next couple of days :). Been busy with other support recently.

[AllanJard]

Apologies for the delay looking into this. I've just tried the StackBltiz link and it still won't load for me in either browser. Not sure why, other StackBltiz links are loading okay.

However, there is an example of Bootstrap 5 with a checkbox in the header on the web-site (make sure you select "Bootstrap 5" from the styling menu at the top right. The alignment appears okay there. I've tried it with table-sm (which your screenshot looks like it might have?) but that also appears okay.

Are you able to give me a different link showing the issue? Sorry, I don't know why the SB link isn't working.