QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-798 z-index fun to fix sticky-header bleed-through

Browse Source
This commit is contained in:
darin.kelkhoff
2024-02-07 09:28:33 -06:00
parent 26f9e19222
commit fc238127a7
1 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/qqq/components/query/FieldListMenu.tsx
View File

@ -561,6 +561,14 @@ export default function FieldListMenu({idPrefix, heading, placeholder, tableMeta
const textFieldId = `field-list-dropdown-${idPrefix}-textField`; const textFieldId = `field-list-dropdown-${idPrefix}-textField`;
let listItemPadding = isModeToggle ? "0.125rem": "0.5rem"; let listItemPadding = isModeToggle ? "0.125rem": "0.5rem";
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
// for z-indexes, we set each table header to i+1, then the fields in that table to i (so they go behind it) //
// then we increment i by 2 for the next table (so the next header goes above the previous header) //
// this fixes a thing where, if one table's name wrapped to 2 lines, then when the next table below it would //
// come up, if it was only 1 line, then the second line from the previous one would bleed through. //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
let zIndex = 1;
return ( return (
<> <>
<Button onClick={openMenu} {...buttonProps}> <Button onClick={openMenu} {...buttonProps}>
@ -639,10 +647,12 @@ export default function FieldListMenu({idPrefix, heading, placeholder, tableMeta
marginLeft = "-1rem"; marginLeft = "-1rem";
} }
zIndex += 2;
return ( return (
<React.Fragment key={tableWithFields.table?.name ?? "theTable"}> <React.Fragment key={tableWithFields.table?.name ?? "theTable"}>
<> <>
{headerContents && <ListItem sx={{position: "sticky", top: "0", backgroundColor: "#FFFFFF", zIndex: 1, padding: listItemPadding, ml: marginLeft, display: "flex", alignItems: "flex-start"}}>{headerContents}</ListItem>} {headerContents && <ListItem sx={{position: "sticky", top: -1, zIndex: zIndex+1, padding: listItemPadding, ml: marginLeft, display: "flex", alignItems: "flex-start", backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1) 90%, rgba(255,255,255,0))"}}>{headerContents}</ListItem>}
{ {
tableWithFields.fields.map((field) => tableWithFields.fields.map((field) =>
{ {
@ -703,7 +713,7 @@ export default function FieldListMenu({idPrefix, heading, placeholder, tableMeta
return <ListItem return <ListItem
key={key} key={key}
id={`field-list-dropdown-${idPrefix}-${index}`} id={`field-list-dropdown-${idPrefix}-${index}`}
sx={{color: "#757575", p: 1, borderRadius: ".5rem", padding: listItemPadding, pl: paddingLeft, scrollMarginTop: "3rem", ...style}} sx={{color: "#757575", p: 1, borderRadius: ".5rem", padding: listItemPadding, pl: paddingLeft, scrollMarginTop: "3rem", zIndex: zIndex, background: "#FFFFFF", ...style}}
onMouseOver={(event) => handleMouseOver(event, field, tableWithFields.table)} onMouseOver={(event) => handleMouseOver(event, field, tableWithFields.table)}
{...onClick} {...onClick}
>{contents}</ListItem>; >{contents}</ListItem>;