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,
|
: null,
|
||||||
m("div", {style: {height: '100%'}},
|
m("div", {style: {height: '100%'}},
|
||||||
// Ohne Topbar nutzt der scrollbare Bereich die volle Höhe.
|
// Ohne Topbar nutzt der scrollbare Bereich die volle Höhe.
|
||||||
m("div", {style: {height: hatTopbar ? 'calc(100% - 32px' : '100%', overflow: 'auto', width: '100%'}},
|
// Wichtig für den Sticky-Header: Dieser div muss selbst der
|
||||||
m("table.w3-table", {style: {'overflow-y': 'auto'}},
|
// 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
|
// Optionale Spaltenüberschriften: Ein Titel je
|
||||||
// columnmapper-Spalte, 1:1 von links nach rechts
|
// columnmapper-Spalte, 1:1 von links nach rechts
|
||||||
// (die Einrückung teilt sich das td mit der
|
// (die Einrückung teilt sich das td mit der
|
||||||
@@ -118,7 +124,11 @@ export const Treetable: m.ClosureComponent<iTreetable> = (vnode) => {
|
|||||||
? m("thead",
|
? m("thead",
|
||||||
m("tr.w3-theme",
|
m("tr.w3-theme",
|
||||||
vnode.attrs.header.map((titel: string) =>
|
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: {
|
style: {
|
||||||
position: 'sticky',
|
position: 'sticky',
|
||||||
top: '0',
|
top: '0',
|
||||||
|
|||||||
Reference in new issue
Block a user