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
Hi @allen
Just for your info, I downloaded DataTables.zip on Monday this week and this line is still appearing at the bottom of the css files which causes the select 'tick' to not appear.
:root {
--dtsl-tick_content-checked: '';
}
Here's my download link:
https://datatables.net/download/#bs5/jszip-3.10.1/pdfmake-0.3.11/kv-1.0.0/dt-3.1.2/b-4.1.2/cv-1.1.2/cr-3.1.2/date-2.1.2/e-3.1.1/fc-6.1.1/fh-5.1.1/kt-3.1.1/r-4.1.1/rg-2.1.1/rr-2.1.1/sc-3.1.1/sl-4.1.1
I've just checked it again today and the css and the min.css still has it included. Is it serving some other purpose?
Andy
Hi Andy,
Thanks for your comment on this. I've just tried to reproduce the issue, but haven't been able to, so I suspect I missing something. I've put this little example together and it looks like the checkboxes are working okay. Can you spot what I might be missing to trigger the error state? Can you link to an example showing the issue?
Allan
Hi Allan, as you say, your example works fine. I wonder if that's because you are using the CDN. I downloaded the files to my local machine using the link I posted and the css file had it in there.
Cheers
Andy
Hi Andy,
The download should exactly match the CDN file here. Checking the CSS file it has those lines as well:
So there is something else going on. Any chance you can send me a link to the page? You can PM it to me if you don't want the link to be public.
Allan
Hi Allan
Thanks for this. On further investigation it looks like the culprit is the applied Bootstrap style class '.form-check-input:checked' as this is responsible for applying the Bootstrap styled 'tick' image. I was advised to only use 'bootstrap-grid.min.css' if I just want a grid style layout - so this is all I included. It turns out that you also need the main 'bootstrap.min.css' which has the necessary tick image styling. When I include this, it works - although, I'm not a fan of that tick style!!
Anyway, I'm sorted now. Thanks for your help, Allan.
Cheers
Andy
Ah - I wouldn't have been able to guess that was the issue! Good to hear you found the culprit and including all of Bootstrap allowed the styling to work
.
Allan