From 3ba9b0a07facbeddd0f899ffab77ed5c7bfaa486 Mon Sep 17 00:00:00 2001 From: Gerd Date: Thu, 24 Sep 2026 19:02:40 +0200 Subject: [PATCH] fix(treetable): Sticky-Header der Kopfzeile reparieren MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die schließende Klammer fehlte im calc() der Scroll-Container-Höhe, wodurch die Höhe auf auto fiel und der Div nie selbst scrollte — Sticky bezog sich damit auf keinen funktionierenden Scroll-Container. Zusätzlich das overflow-y am table-Element entfernt (macht die Tabelle selbst zum Scroll-Container und bricht Sticky) und w3-theme als eigener Hintergrund auf die th gelegt, damit beim Scrollen keine Zeilen durchscheinen. Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe --- Client/Components/widgets/Treetable_V2.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/Client/Components/widgets/Treetable_V2.ts b/Client/Components/widgets/Treetable_V2.ts index 523662d..ed05b84 100644 --- a/Client/Components/widgets/Treetable_V2.ts +++ b/Client/Components/widgets/Treetable_V2.ts @@ -107,8 +107,14 @@ export const Treetable: m.ClosureComponent = (vnode) => { : null, m("div", {style: {height: '100%'}}, // Ohne Topbar nutzt der scrollbare Bereich die volle Höhe. - m("div", {style: {height: hatTopbar ? 'calc(100% - 32px' : '100%', overflow: 'auto', width: '100%'}}, - m("table.w3-table", {style: {'overflow-y': 'auto'}}, + // Wichtig für den Sticky-Header: Dieser div muss selbst der + // Scroll-Container sein (feste Höhe + overflow), damit sich + // position:sticky der th-Zellen auf ihn bezieht. + m("div", {style: {height: hatTopbar ? 'calc(100% - 32px)' : '100%', overflow: 'auto', width: '100%'}}, + // overflow darf hier NICHT auf dem table-Element gesetzt + // werden — sonst wird die Tabelle selbst zum Scroll-Container + // und der Sticky-Header bricht. + m("table.w3-table", // Optionale Spaltenüberschriften: Ein Titel je // columnmapper-Spalte, 1:1 von links nach rechts // (die Einrückung teilt sich das td mit der @@ -118,7 +124,11 @@ export const Treetable: m.ClosureComponent = (vnode) => { ? m("thead", m("tr.w3-theme", vnode.attrs.header.map((titel: string) => - m("th", { + m("th.w3-theme", { + // Sticky-Header: Eigener Hintergrund + // nötig, da der tr-Hintergrund beim + // Scrollen mit den Daten wegwandert + // und sonst Zeilen durchscheinen. style: { position: 'sticky', top: '0',