Bootstrap 5 and DataTables 1.12.0 sorting icons problem.

ikharus

Just a little comment about the new sorting icons when the class table-sm is set on a table. Currently, this is how it looks:

which looks kind of weird to me. I'm not sure if it is like this on purpose or not. Removing the following lines from the css seems to fix the problem:

table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
  padding-right: 20px;
}
table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before {
  top: 5px;
  right: 0.85em;
}
table.dataTable.table-sm .sorting:after,
table.dataTable.table-sm .sorting_asc:after,
table.dataTable.table-sm .sorting_desc:after {
  top: 5px;
}

without those lines, it looks like this (which is the same look as non table-sm tables):

Now, I'm not a css expert (far from it) so I don't know if you should remove the problematic css part permanently. But now that I remember how the old icons looked like, maybe this css was to properly show the old icons, not the new ones??

kthorngren

Those are from the Datatables default styling CSS dataTables.css. Fro Bootstrap 5 you should be using dataTables.bootstrap5.css instead. See the Styling docs for more details. Use the Download Builder to get all the correct BS5 integration files. Let us know if that helps your issue.

Kevin

ikharus

This is what I did, the css I showed was taken from the generated datatables.css I downloaded. Here's the css header for reference.

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs5/jszip-2.5.0/pdfmake-0.1.36/dt-1.12.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/rg-1.2.0
 *
 * Included libraries:
 *   JSZip 2.5.0, pdfmake 0.1.36, DataTables 1.12.0, Buttons 2.2.3, Column visibility 2.2.3, HTML5 export 2.2.3, Print view 2.2.3, RowGroup 1.2.0

ikharus

Also, I don't think this css part is for the default styling.

Here's the default styling:
https://cdn.datatables.net/1.12.0/css/jquery.dataTables.css

Here's the bootstrap styling:
https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.css

You'll find the css in the dataTables.bootstrap5.css file. Also, it was already there for the 1.11.3 version, so I think it's not supposed to be the same for the new version.
https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.css

kthorngren

Thats strange. I just looked at the BS5 example and the sorting icons look like your screenshot. Compare that to Datatables 1..11.0:
http://live.datatables.net/vuhemeho/1/edit

Try your code with 1.11.0 to see if it fixes the problem. @allan or @colin will need to take a look.

Kevin

ikharus

It is working fine with Datatables before 1.12.0 because the sorting icons before 1.12.0 are next to each other compare to the new icons with 1.12.0 that are one above the other. Thanks for you time. If you find a workaround for now, it would be appreciated (I would like to use the minimized css and then apply my own with a patch that would fix this). Thanks!!

ikharus

To reproduce the described behavior (with table-sm):
http://live.datatables.net/vuhemeho/2/edit

allan

Excellent - thanks very much! I've just committed a fix and it will be in 1.12.1 which I'm going to tag up later this morning.

Regards,
Allan

allan

That's 1.12.1 released now.