[Web] Align the table expand control and row checkbox

- Center the +/- glyph in the expand control: its line-height (1.25em)
  was larger than the 1em box, pushing the glyph down. Derive the box's
  margin-top from its size so it is centered in the row (desktop and
  the larger mobile variant).
- Hide sort arrows on non-orderable headers. The default initial order
  targets column 0, the expand column, which got a sorting_asc arrow
  and arrow padding although it cannot be sorted.
- Center row checkboxes level with the expand control by using
  Bootstrap's 0.25em margin-top instead of a fixed 7px.

Signed-off-by: Moritz Stückler <moritz@bitbetter.de>
This commit is contained in:
Moritz Stückler committed 2026-10-22 12:43:18 +02:00
1 parent 81d6b1f547
commit 8d4895a54d
2 files changed
+16 -3

No files matched your search

+15 -2
View File
@@ -28,7 +28,8 @@ table.dataTable td.dt-control:before {
color: var(--mc-dtr-color);
height: 1em;
width: 1em;
line-height: 1.25em;
line-height: 1em;
margin-top: calc(-0.5em - 1.5px);
border-radius: 0px;
box-shadow: none;
font-size: 14px;
@@ -39,11 +40,23 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
table.dataTable td.dt-control:before {
background-color: var(--mc-dtr-active-bg) !important;
}
/* The default initial order targets column 0, which is usually the non-orderable expand column */
table.dataTable thead > tr > th.sorting_disabled.sorting_asc,
table.dataTable thead > tr > th.sorting_disabled.sorting_desc {
padding-right: 0.5rem;
}
table.dataTable thead > tr > th.sorting_disabled.sorting_asc:before,
table.dataTable thead > tr > th.sorting_disabled.sorting_asc:after,
table.dataTable thead > tr > th.sorting_disabled.sorting_desc:before,
table.dataTable thead > tr > th.sorting_disabled.sorting_desc:after {
display: none;
}
table.dataTable.table-striped>tbody>tr>td {
vertical-align: middle;
}
table.dataTable.table-striped>tbody>tr>td>input[type="checkbox"] {
margin-top: 7px;
/* centers the 1em checkbox in the 1.5em line, level with the expand control */
margin-top: 0.25em;
}
td.dtr-col-lg {
min-width: 350px;
+1 -1
View File
@@ -191,7 +191,7 @@
height: 2rem;
width: 2rem;
line-height: 2rem;
margin-top: -15px;
margin-top: calc(-1rem - 1.5px);
}
li .dtr-data {