BS5 styling issue in v2.3

BS5 styling issue in v2.3

RichardD2RichardD2 Posts: 18Questions: 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.

Screenshot

Replies

  • RichardD2RichardD2 Posts: 18Questions: 2Answers: 1

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

  • RichardD2RichardD2 Posts: 18Questions: 2Answers: 1

    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.

  • allanallan Posts: 64,373Questions: 1Answers: 10,628 Site admin

    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

  • RichardD2RichardD2 Posts: 18Questions: 2Answers: 1

    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?

  • allanallan Posts: 64,373Questions: 1Answers: 10,628 Site admin

    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

Sign In or Register to comment.