Alignment issue of checkbox in header

bensitu

Link to test case:
https://datatables.net/extensions/select/examples/checkbox/checkbox.html

Description of problem:
Hello,
I am using the latest DataTables 2.3.2 with Bootstrap 4.6. (using Bootstrap style)
The first column of my table is the checkbox(using Select Extensions).
To select all of the rows, i clicked on the checkbox in the table header, but i found the aligment in the header has an issue. It's not align center or align middle.
How can i solve it ?

Thanks
Ben

Settings:

select: {
        style: 'os',
        selector: 'td:first-child'
},

const commonColumns = [
{
            name: 'checkbox',
            data: null,
            title: '',
            width: '3%',
            className: 'text-center align-middle',
            orderable: false,
            searchable: false,
            placeholder: 'Not for input'
        },
...
]

const commonColumnDefs = [
{
            targets: 'checkbox:name',
            render: DataTable.render.select()
        },
...
]

allan

Odd that it is off to the left for you. Its going to the right a bit for me in the example you linked to. Is the screenshot from that page?

If you are seeing this on you own page, could you try:

.dt-orderable-none:not(.dt-ordering-asc,.dt-ordering-desc) span.dt-column-order:empty {
 display: none;
}

And see if that helps?

Thanks,
Allan

bensitu

Thanks Allen for the reply.
The screenshot is of my webpage, not the example.
I also saw that the checkbox in the example is a little bit to the right.
I tried adding CSS, but unfortunately, it didn't work.
This is the HTML code for the header checkbox of my page added by DataTables.

Thanks
Ben

<th class="text-center align-middle dt-orderable-none dt-select" data-dt-column="0" rowspan="1" colspan="1">
  <div class="dt-column-header">
    <span class="dt-column-title"></span>
    <input class="dt-select-checkbox" type="checkbox" aria-label="Select all rows">
  </div>
</th>

Overall settings for the DataTables:

data: data,
paging: false,
searching: false,
ordering: false,
info: false,
autoWidth: false,
responsive: false,
scrollCollapse: true,
order: [[1, 'asc'], [2, 'asc']],
select: {
   style: 'os',
   selector: 'td:first-child'
},
layout: {
    bottomStart: {
          buttons: buttons
    }
},
columns: commonColumns,
columnDefs: commonColumnDefs,
...

bensitu

It seems that the following CSS works for me.

.dt-orderable-none:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-header {
    justify-content: center;
}

bensitu

I think that when I add the bootstrap class "table-sm" to the table. it would align more to the right.

<table id="example" class="display table table-sm table-striped table-bordered table-hover dataTable" aria-describedby="example_info" style="width: 100%;">

bensitu

I didn't have this problem with DataTable 2.2.2 and Select 3.0.0.
I would roll back to the older version until this problem has been fixed.
https://cdn.datatables.net/v/bs4/moment-2.29.4/dt-2.2.2/b-3.2.2/sc-2.4.3/sl-3.0.0/datatables.min.js

allan

Can you link to a page showing the issue with it aligning to the left please? I haven't been able to reproduce that.

Allan