DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Alignment issue of checkbox in header

Alignment issue of checkbox in header

bensitubensitu Posts: 9Questions: 1Answers: 0
edited June 11 in Free community support

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()
        },
...
]

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 65,013Questions: 1Answers: 10,762 Site admin

    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

  • bensitubensitu Posts: 9Questions: 1Answers: 0

    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,
...
  • bensitubensitu Posts: 9Questions: 1Answers: 0

    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;
}
  • bensitubensitu Posts: 9Questions: 1Answers: 0

    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%;">

  • bensitubensitu Posts: 9Questions: 1Answers: 0

    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

  • allanallan Posts: 65,013Questions: 1Answers: 10,762 Site admin

    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

  • bensitubensitu Posts: 9Questions: 1Answers: 0
    edited June 13

    Hello Allen,
    I have created a test case in this link.
    https://live.datatables.net/jexevinu/3/

    Thanks
    Ben

  • allanallan Posts: 65,013Questions: 1Answers: 10,762 Site admin

    Hi Ben,

    Many thanks! Yup, I can see it there as well. I'll take a look into it and post back with a fix - good chance that will be Monday.

    Allan

  • allanallan Posts: 65,013Questions: 1Answers: 10,762 Site admin
    Answer ✓

    Thanks again for the test case. I've committed a change to address the issue.

    Here is the test case updated with the Select nightly.

    I'll do a release of Select in the near future to address this.

    Allan

  • bensitubensitu Posts: 9Questions: 1Answers: 0

    Hi Allen,
    Thanks so much for this.
    I can see this issue has been fixed in the test case with Select nightly.

    Thanks
    Ben

  • prakashsoftwareprakashsoftware Posts: 2Questions: 1Answers: 0

    I also faced similar issue but now I got the solutions.
    Thanks everyone for the support.

  • bensitubensitu Posts: 9Questions: 1Answers: 0

    Hi Allen,
    Just want to check if above change has been released to stable version?

  • allanallan Posts: 65,013Questions: 1Answers: 10,762 Site admin
    Answer ✓

    Hi,

    It hadn't been, but it is now. Select 3.1.0 now released with this change :).

    Allan

  • bensitubensitu Posts: 9Questions: 1Answers: 0

    Hi Allan,
    Thank you so much.

    Ben

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2025 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.