BS5 styling issue in v2.3
BS5 styling issue in v2.3

Link to test case:
https://live.datatables.net/kefavusa/1/edit?html,output
Offending CSS rule:
table.dataTable.table-sm > thead > tr th.dt-orderable-asc,
table.dataTable.table-sm > thead > tr th.dt-orderable-desc,
table.dataTable.table-sm > thead > tr th.dt-ordering-asc,
table.dataTable.table-sm > thead > tr th.dt-ordering-desc,
table.dataTable.table-sm > thead > tr td.dt-orderable-asc,
table.dataTable.table-sm > thead > tr td.dt-orderable-desc,
table.dataTable.table-sm > thead > tr td.dt-ordering-asc,
table.dataTable.table-sm > thead > tr td.dt-ordering-desc {
padding-right: 20px;
}
Description of problem:
It looks like the Bootstrap 5 styling hasn't been completed updated to account for the header changes in v2.3 - the table-small
rule still includes padding on the header cells, which pushes the new dt-column-header
element to the right.
You can see the same problem on the Bootstrap 5 example page if you use the developer tools to add the table-sm
class to the table.
Replies
Correction: pushes the new
dt-column-header
element to the left.Another problematic rule:
That pushes the sort indicator too far to the left - especially when the header text and sort indicator are swapped.
Hi,
Many thanks for flagging this up for me! I'd completely forgotten about the
table-sm
styles. I've committed a fix now. It will be in the nightly soon and I'll do a 2.3.1 release in the relatively near future (will allow a little time to see if anything else crops up from the 2.3.0 release).Allan
Thanks for the quick fix. But technically, if you want to match the BS5 rules, the padding should be
0.25rem
, not4px
:_tables.scss
_variables.scss
Alternatively, you could probably omit that rule and let the BS5 styles take care of it.
I'm also not sure why you'd need the
right
property on thedt-column-order
element? The flexbox parent will position it correctly. But if you do need it, presumably thedt-type-date
/dt-type-numeric
version should be usingleft
instead ofright
?Good point! That's the fix to rem committed. Funny they don't use their variables to do that. I'm sure there will be a reason.
And yes, I did mean
left
, notright
- committed here. Thanks for pointing that out.I added that to allow a little extra spacing, but perhaps I should have used a margin. I'll check that!
Allan