Skip to content

Select All checkbox in table header is misaligned with table rows #13

@davidjb

Description

@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:

alignment

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:

display: flex;
justify-content: space-between;
align-items: var(--dt-header-align-items);
gap: 4px;

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
  },
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions