BS5 styling issue in v2.3

RichardD2

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.

RichardD2

Correction: pushes the new dt-column-header element to the left.

RichardD2

Another problematic rule:

table.dataTable.table-sm > thead > tr th.dt-orderable-asc span.dt-column-order, 
table.dataTable.table-sm > thead > tr th.dt-orderable-desc span.dt-column-order, 
table.dataTable.table-sm > thead > tr th.dt-ordering-asc span.dt-column-order, 
table.dataTable.table-sm > thead > tr th.dt-ordering-desc span.dt-column-order, 
table.dataTable.table-sm > thead > tr td.dt-orderable-asc span.dt-column-order, 
table.dataTable.table-sm > thead > tr td.dt-orderable-desc span.dt-column-order, 
table.dataTable.table-sm > thead > tr td.dt-ordering-asc span.dt-column-order, 
table.dataTable.table-sm > thead > tr td.dt-ordering-desc span.dt-column-order {
    right: 5px;
}

That pushes the sort indicator too far to the left - especially when the header text and sort indicator are swapped.

allan

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

RichardD2

Thanks for the quick fix. But technically, if you want to match the BS5 rules, the padding should be 0.25rem, not 4px:

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

_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 the dt-column-order element? The flexbox parent will position it correctly. But if you do need it, presumably the dt-type-date / dt-type-numeric version should be using left instead of right?

allan

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, not right - 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