Geraetetafel ohne eigenen Rollbalken

Die Tafel stand in einem Kasten mit fester Hoehe und eigenem Balken - in einer
Karte, die selbst in einer scrollenden Seite steht. Beim Wischen wusste man
nie, welcher der beiden Balken gerade dran ist. Jetzt ist die Tafel so lang,
wie sie ist, und die Seite scrollt als Ganzes.

Der Tabellenkopf klebt weiterhin oben: gescrollt wird bei AdminLTE in
.app-main, dort sitzt oben die Navigation, und daran haelt er sich fest. Dafuer
muss die Tafel selbst frei von overflow bleiben - sonst waere sie wieder ein
eigener Scroll-Kasten, und der Kopf hinge an ihr statt an der Seite.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-08 22:56:19 +02:00
co-authored by Claude Opus 5
parent 07bca5104e
commit eb1aa8c760
2 changed files with 14 additions and 9 deletions
+13 -8
View File
@@ -1986,15 +1986,19 @@ input[type='range']::-webkit-slider-runnable-track {
.geraete-sieb input[type="search"] { max-width: 22rem; }
.geraete-sieb .form-check { flex: none; }
/* Kein eigener Rollbalken: die Tafel ist so lang, wie sie ist, und die Seite
scrollt als Ganzes. Ein Kasten mit eigenem Balken in einer Karte, die selbst
in einer scrollenden Seite steht, ist ein Balken zu viel - man weiss beim
Wischen nie, welcher der beiden gerade dran ist. */
.geraete-tafel {
max-height: calc(100vh - 22rem);
min-height: 14rem;
overflow-y: auto;
border: 1px solid var(--bs-border-color, #2c3034);
border-radius: .375rem;
/* Bewusst ohne Rahmen und ohne overflow: beides machte aus der Tafel
wieder einen eigenen Scroll-Kasten, und der klebende Tabellenkopf haette
nichts mehr, woran er kleben kann. */
margin-bottom: 0;
}
/* Der Kopf bleibt beim Scrollen stehen - sonst raet man ab Zeile zwanzig,
welche Spalte der Raum war. */
/* Der Kopf bleibt trotzdem stehen: er klebt an der Kopfzeile der Seite, denn
gescrollt wird bei AdminLTE in .app-main, und dort ist oben die Navigation.
Ab Zeile zwanzig weiss man sonst nicht mehr, welche Spalte der Raum war. */
.geraete-tafel thead th {
position: sticky;
top: 0;
@@ -2005,6 +2009,8 @@ input[type='range']::-webkit-slider-runnable-track {
text-transform: uppercase;
color: var(--ton-schrift-3, #6f7a81);
white-space: nowrap;
border-bottom: 1px solid var(--bs-border-color, #2c3034);
box-shadow: 0 1px 0 var(--ton-grund, #191d20); /* deckt die Zeile darunter */
}
.geraete-tafel td { vertical-align: middle; }
.geraete-tafel .name { line-height: 1.25; }
@@ -2054,7 +2060,6 @@ input[type='range']::-webkit-slider-runnable-track {
@media (max-width: 575.98px) {
.geraete-sieb { flex-wrap: wrap; }
.geraete-sieb input[type="search"] { max-width: none; }
.geraete-tafel { max-height: calc(100vh - 18rem); }
}
/* === Protokollseite ======================================================
+1 -1
View File
@@ -823,7 +823,7 @@ function zeichneGeraete() {
+ ' btn-sm text-nowrap" id="geraeteTipps">Vorschläge übernehmen</button></div>';
}
html += '<div class="geraete-tafel table-responsive">'
html += '<div class="geraete-tafel">'
+ '<table class="table table-sm table-hover align-middle mb-0"><thead><tr>'
+ "<th>Gerät</th>"
+ '<th class="d-none d-md-table-cell">Art</th>'