Change of height in BS5 2.3.3 breaks header height
Change of height in BS5 2.3.3 breaks header height
Balkoth
Posts: 28Questions: 2Answers: 0
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.
Replies
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.
Hi Balkoth,
Thanks for posting this. I've just created these two little test cases:
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
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
Ah, the font-size in your theme is smaller (14px to 16px in BS5 default), which results in the extra height of the
spancontaining 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
Thanks for looking that fast into this. Very well appreciated. Hopefully there can be a solution that works across themes.