Create a React component using Material UI that remains fixed at the top of the page when scrolling, without being

Question

Create a React component using Material UI that remains fixed at the top of the page when scrolling, without being

My AppBar is working fine without using sticky, but I need the element on my page to stick at the top when the user scrolls. I found a solution that seems to work here: https://www.w3schools.com/howto/howto_css_sticky_element.asp

However, in my React page, I want my ProgressBar component to remain at the top. The RenderTeamSelections component, which is a large table below it, quickly pushes the ProgressBar out of view. I want the ProgressBar to stay visible while the user interacts with 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 have tried using withStyles and experimenting with 'fixed', 'sticky', and '-webkit-sticky' for the position of the ProgressBar, but it has not stayed at the top when scrolling. Any assistance would be greatly appreciated as I could not find any direct solutions in the Material docs for this scenario.

css reactjs material-ui

Answer 1

Answer №1

For most components, you can apply the CSS property {position: 'fixed'}. If this does not work, consider adjusting the zIndex.

Here is an 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>

Answer 2

For most components, you can apply the CSS property {position: 'fixed'}. If this does not work, consider adjusting the zIndex.

Here is an 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>

Answer 3

Answer №2

I managed to successfully implement material ui themes to get it working.

Below are the custom styles I used in my component. I included a z-index property to address an issue where my table selects and header data were still visible when scrolling through

<RenderTeamSelections {...this.props] />

.

Here is the final version of the component with the applied 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);

Answer 4

I managed to successfully implement material ui themes to get it working.

Below are the custom styles I used in my component. I included a z-index property to address an issue where my table selects and header data were still visible when scrolling through

<RenderTeamSelections {...this.props] />

.

Here is the final version of the component with the applied 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);

Answer 5

Answer №3

For a fixed placement, you can utilize the Material UI AppBar component and set the position attribute to "sticky".

<AppBar position="sticky"></AppBar>

Check out more at this link!

Answer 6

For a fixed placement, you can utilize the Material UI AppBar component and set the position attribute to "sticky".

<AppBar position="sticky"></AppBar>

Check out more at this link!

Create a React component using Material UI that remains fixed at the top of the page when scrolling, without being

Answer №1

Answer №2

Answer №3

Similar questions

Steps to resolve the 'form' variable being assigned a value but never used in axios:

Should I make the API call from the node server or from React on the client side?

the react package fails to meet the expectations of its fellow components

Utilizing React JS with Material-UI Autocomplete allows for seamlessly transferring the selected item from the renderInput to the InputProps of the textfield component

Issues with the performance of input range sliders in iOS Safari is causing frustration

Analyzing Passwords for Redirection

Having trouble with Next.js generateStaticParams function not producing the desired output

What is the best way to submit several files along with additional fields simultaneously using FormData?

Bidirectional Data Binding Using Meteor and React

React, managing states with multiple options for a property's state

Can passing parameters between nested map functions cause any issues?

Is AngularJS causing issues with Foundation modals? Any solutions to this problem?

Unique approaches: Custom layouts compared to a single adaptive layout for managing various device sizes and orientations

What is the best way to evaluate a sequence of actions and their outcomes?

You may only insert a single image into a container

Enforcing HTTPS in Next.js version 13

Styling with CSS: I am looking to display images beneath text

Remove the image from the container in Bootstrap

When working with Web Workers in Jest, you may encounter an error stating "Cannot use 'import.meta' outside a module."

Enhance your design with dynamic hover effects