fix(treetable): Sticky-Header der Kopfzeile reparieren
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 <vibe@mistral.ai>
This commit is contained in:
1 parent
c96ed6e97d
commit
3ba9b0a07f
1 file changed
+13
-3
@@ -107,8 +107,14 @@ export const Treetable: m.ClosureComponent<iTreetable> = (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<iTreetable> = (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',
|
||||
|
||||
Reference in new issue
Block a user