DataTables 3 with Select 4.0.0-beta checkmarks not displaying
DataTables 3 with Select 4.0.0-beta checkmarks not displaying
tuf37504
Posts: 3Questions: 2Answers: 0
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: ''
This question has an accepted answers - jump to answer
Answers
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:
Allan
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.
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
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