BS5 styling issue in v2.3
BS5 styling issue in v2.3
RichardD2
Posts: 15Questions: 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