DataTables 3 with Select 4.0.0-beta checkmarks not displaying

tuf37504

Link to test case: https://live.datatables.net/gadixeko/1/
Error messages shown: No errors observed.
Description of problem:
Added a select column rendered by DataTable.render.select(). Clicking on the checkbox doesn't show the checkmark. The extension is working correctly as shown by the counter below the table.

Inspecting datatables.min.css, it looks like this line is the culprit as it overrides the correct assignment earlier in the stylesheet

:root {
--dtsl-tick_margin-top: -8px;
--dtsl-tick_line-height: 6px;
--dtsl-tick_border: 1px solid;
--dtsl-tick_border-checked: 1px solid;
--dtsl-tick_content-checked: '\2713';
}

(Found second to the last selector in the minified file)
:root{--dtsl-tick_content-checked: ''

allan

Hi,

Thanks for this! The issue is that you don't have Bootstrap 5's own CSS included on the page, but the Bootstrap 5 styling option was selected for the DataTables components. If you add Bootstrap 5 it will work as expected: https://live.datatables.net/gadixeko/4/edit .

The reason for this is that with the Bootstrap 5 styling, it will provide the styling for the checked check boxes (to maintain styling consistency for Bootstrap 5 apps).

A couple of other points:

• Select 4 is now released, so it can be used (updated in the example)
• No need to include the DataTables nightly and 3.0.0 build. Just one (I've used 3.0.0 in the updated example).

Allan

tuf37504

Thanks, Allan!

It was still not working in my application so I investigated a little more. It looks like the JS download version is the cause. The --dtsl-tick_content-checked value was a red-herring.

• Switched CSS only to CDN version - did not fix issue
• Switched JS only to CDN version - fixed issue
• Re-downloaded resources - did not fix issue
• Saved the JS CDN version to serve self-host - fixed issue

Comparing the download and CDN versions working side-by-side, I found that the download version does not add "form-check-input" class to the input. If I manually add this in the browser's developer console, the checkmarks display.

The download url for the features I selected: https://datatables.net/download/#bs5/jszip-3.10.1/pdfmake-0.2.7/dt-3.0.0/af-3.0.0/b-4.0.0/cr-3.0.0/cc-2.0.0/date-2.0.0/fc-6.0.0/fh-5.0.0/kt-3.0.0/r-4.0.0/rg-2.0.0/rr-2.0.0/sc-3.0.0/sb-2.0.0/sl-4.0.0

allan

Thank you for digging into that!! Based on your research I found an issue in how I'd configured the download builder for some of the packages. I've gone through the whole lot and resolved any that had an error (Responsive's min file had the non-min version in it!).

Allan