Change of height in BS5 2.3.3 breaks header height

Balkoth

In the BS5 theme in 2.3.3 the header height was changed from 20px to 24px:

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
  position: relative;
  width: 12px;
  height: 24px;
}

This increases the header height by 4px making it different from all the other table rows. Please revert this change.

Balkoth

Also header rows that do not have ordering available are also those 4px smaller in height. So if you have two headers stacked, one with ordering and one without, this looks really weird.

allan

Hi Balkoth,

Thanks for posting this. I've just created these two little test cases:

• With 2.3.5: https://live.datatables.net/dupiboqo/1/edit
• With 2.3.2: https://live.datatables.net/pequlobi/1/edit

In both cases the row height in the header is 41px. The alignment of the sorting arrows in the 2.3.5 version is actually better for me - the arrows are more correctly aligned to the center.

What browser and OS are you using please? I'll try to replicate what you are seeing. It would help if you could link to a page showing the row height issue as well please?

Allan

Balkoth

I see. It has something to do with the bootstrap theme i'm using:

2.3.2: https://live.datatables.net/pequlobi/3/edit
2.3.5: https://live.datatables.net/dupiboqo/2/edit

allan

Ah, the font-size in your theme is smaller (14px to 16px in BS5 default), which results in the extra height of the span containing the arrows forcing the height of the header to be just a little higher (2px in this case).

The height actually isn't as relevant it used to be due to align-items: center; it could be set to be 0 and the display would still be correct. For the moment I've reverted it back to 20px and will take a look at removing that height when I refactor the CSS.

Thanks for letting me know about this and the test cases,
Allan

Balkoth

Thanks for looking that fast into this. Very well appreciated. Hopefully there can be a solution that works across themes.