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:
+13
-8
@@ -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 ======================================================
|
||||
|
||||
@@ -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>'
|
||||
|
||||
Reference in New Issue
Block a user