So I have AppBar working fine. And I didn't even use sticky for that but I think I need some kind of sticky style to make my element in the page essentially stick at the top when the user scrolls. I essentially want this.
https://www.w3schools.com/howto/howto_css_sticky_element.asp
But within my React page I want my ProgressBar
component to remain at the top. The component below this RenderTeamSelections
which is a big table, it will push the ProgressBar
out of view quickly. I want to kept the ProgressBar
in view while the user makes selections from the table. Here is the relevant code.
return (
<div className={rootClassName}>
<div className="g-row">
<div className="g-col">
<AccountProfile {...this.props} />
<br />
<Team team={this.props.team} profileDetail={profileDetail} />
<br />
<ProgressBar {...this.props} />
<br />
<RenderTeamSelections {...this.props] />
</div>
</div>
</div>
);
I am familiar with the use of withStyles and have played with some settings on the position of ProgressBar
like 'fixed', 'sticky' and '-webkit-sticky' but have not gotten it to stick at the top when I scroll yet. Any help would be greatly appreciated. I didn't see anything Material docs that seemed to directly relate to this scenario.
import React from 'react'; export default () => <h1 className="sticky-inner">Sticky</h1>; This is the actual element that we want to be sticky. The component is a simple functional component that returns <h1> tag, the only thing that we add is a sticky-inner class for the CSS styling.
Sticky Element Has Parent(s) with overflow PropertyIf the sticky element has a parent or ancestor with overflow: hidden , overflow: auto , or overflow: scroll , then position: sticky will not work properly.
A CssBaseline component is a collection of HTML element and attribute style-normalizations. At the <head> of our document, it is added as CSS reset. This component is used to add some basic styling to our application like box-sizing, background color, etc like Css reset for our application on top of Theme.
The sx prop is a shortcut for defining custom styles that has access to the theme. The sx prop lets you work with a superset of CSS that packages all of the style functions exposed in @mui/system . You can specify any valid CSS using this prop, as well as many theme-aware properties that are unique to MUI System.
On most components you can add {position: 'fixed'}
. So try to use it in the component styling. if that doesn't work try to change the zIndex.
Example:
<Paper style={{position: 'fixed'}}>
<List className={classes.list} component="nav" aria-label="main mailbox folders"
subheader={<ListSubheader component="div" id="nested-list-subheader">Navigation</ListSubheader>}>
<ListItem button>
<ListItemIcon>
<SubjectIcon/>
</ListItemIcon>
<ListItemText primary="Overview" />
</ListItem>
</List>
I was able to get it working with material ui themes
here is my styles. I added a z-index because my table selects and table header data were still visible in <RenderTeamSelections {...this.props] />
in the sticky as I scrolled.
Here is the final component with styles.
const styles = theme => ({
root: {
background: 'white',
position: '-webkit-sticky',
position: 'sticky',
top: 20,
bottom: 20,
paddingTop: '40px',
paddingBottom: '40px',
zIndex: 5,
},
details: {
display: 'flex'
},
progressWrapper: {
marginTop: theme.spacing(2)
},
linearProgress: {
height: 20
},
});
export function ProgressBar(props) {
const { profileDetail, classes } = props;
const [completeness, setCompleteness] = useState(0)
useEffect(() => {
if (profileDetail) {
setCompleteness(profileDetail.teamKeysTier1.split(",").filter(x => { return x.length != 0 }).length + profileDetail.teamKeysTier2.split(",").filter(x => { return x.length != 0 }).length)
}
}, [profileDetail])
return (
<Portlet className={classes.root} >
<PortletContent >
{completeness > 8 ?
<div className={classes.progressWrapper}>
<Typography variant="h3" color="textSecondary">Team Selection Completeness: {completeness * 10 + 10}%</Typography>
<br />
<br />
<LinearProgress
className={classes.linearProgress}
value={completeness * 10 + 10}
variant="determinate"
position="fixed"
/> </div> :
<div className={classes.progressWrapper}>
<Typography variant="h3" color="textSecondary">Team Selection Completeness: {completeness * 10}%</Typography>
<br />
<br />
<LinearProgress
className={classes.linearProgress}
value={completeness * 10}
variant="determinate"
position="fixed"
/>
</div>}
</PortletContent>
</Portlet>
)
}
export default withStyles(styles)(ProgressBar);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With