Answers

• allan Posts: 65,752Questions: 1Answers: 10,937 Site admin

  May 30 Answer ✓

  Hi,

  You are right - it looks like the legacy CSS checkboxes aren't rendering correctly with the latest Select versions. The legacy example shows that as well with Bootstrap 5 selected.

  I'll comment back shortly when I have a fix.

  In general I would recommend using the newer checkbox renderer if that is an option for you.

  Allan
• allan Posts: 65,752Questions: 1Answers: 10,937 Site admin

  May 30

  The good news is that it works in DataTables 3 and Select 4 beta.

  For the moment, include the following CSS on your page:

  table.dataTable > tbody > tr > td.select-checkbox,
  table.dataTable > tbody > tr > th.select-checkbox {
    position: relative;
  }
  table.dataTable > tbody > tr > td.select-checkbox:before,
  table.dataTable > tbody > tr > th.select-checkbox:before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    content: " ";
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid;
    border-radius: 3px;
  }
  table.dataTable > tbody > tr.selected > td.select-checkbox:before,
  table.dataTable > tbody > tr.selected > th.select-checkbox:before {
    border: 1px solid;
    content: "✓";
    font-size: 20px;
    line-height: 6px;
    text-align: center;
  }
  table.dataTable.compact > tbody > tr > td.select-checkbox:before,
  table.dataTable.compact > tbody > tr > th.select-checkbox:before {
    margin-top: -12px;
  }
  table.dataTable.compact > tbody > tr.selected > td.select-checkbox:after,
  table.dataTable.compact > tbody > tr.selected > th.select-checkbox:after {
    margin-top: -16px;
  }
  
  html.dark table.dataTable input.dt-select-checkbox:indeterminate:after,
  html[data-bs-theme=dark] table.dataTable input.dt-select-checkbox:indeterminate:after {
    background-color: white;
  }
  
  

  Example.

  Allan
• BjornHa Posts: 74Questions: 14Answers: 0

  9:59AM

  We'll change to the new one

  Thanks