BS5 styling issue in v2.3
BS5 styling issue in v2.3
RichardD2
Posts: 25Questions: 2Answers: 1
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-headerelement 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-smstyles. 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
rightproperty on thedt-column-orderelement? The flexbox parent will position it correctly. But if you do need it, presumably thedt-type-date/dt-type-numericversion should be usingleftinstead 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