How to Make a Material UI Grid Element Sticky

How to make a Material UI grid element sticky?

In your sandbox I realized that you have a nested grid item inside another grid item, I don't know if this was intentional, but I removed it anyway.

<Grid item xs={12} sm={6} md={5} lg={5}>
  <Grid item xs elevation={3}> <==== THIS ONE
    <OrderSummaryItem />
  </Grid>
</Grid>

Then I set the position of the OrderSummaryItem component to sticky and some tweaks and I think it's working fine. Check this fork I made from your sandbox: https://codesandbox.io/s/amazing-darkness-q0o5h

Make a Material UI Component in React Sticky when scrolling (not AppBar)

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);

How do I get a sticky footer to work using the built in Grid in Material-ui v1.0.0-beta.30?

Your column has no intrinsic height, so it is only the height of the row. As a result, flex-end has no effect.

Give the column a fixed or viewport height, or a percentage height if it's container has intrinsic height.

Example based on your code, using fixed height (can't use vh in CodeSandbox): https://codesandbox.io/s/llvq36r8q

Material UI grid with independent scrolling columns

In my determination to recreate how I used to do it in bootstrap (https://jsfiddle.net/aq9Laaew/226591/) I was actually able to get it working in Material UI as well. And since I wasn't able to find any sort of examples of this online for this specific use case (React / Material UI scrollable columns), hopefully this will help someone else.

Here is the example: https://codesandbox.io/s/z24wl3n58m

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%;
}

.flex-no-shrink {
  flex-shrink: 0;
}

What I was missing was setting the flex on the root. Once we do that, then we can utilize flex-section, flex-col-scroll, and flex-no-shrink (the latter of which is used to prevent elements above the scrolling from being compressed)

React Material-Ui Sticky Table Header with Dynamic Height

Get rid of the TableContainer overflow-x: auto and it should work

const useStyles = makeStyles({
  customTableContainer: {
    overflowX: "initial"
  }
})

export default function App() {
  const classes = useStyles();
  return (
    <TableContainer classes={{root: classes.customTableContainer}}>
      <Table stickyHeader>
      
      ...

Reference: https://css-tricks.com/dealing-with-overflow-and-position-sticky/

Material-ui: using Divider breaks the grid

Try putting the divider inside of a grid container of its own.

<Grid item xs={2}> 
   <Divider orientation="vertical" flexItem/>
</Grid>

The material ui grid uses flexbox so dropping an item inside of it that does not have the correct properties is going to mess up the grid.

Make a React Material-UI component to stick to the bottom-right of the screen

Add required styling to your class fab:

const styles = theme => ({
  ...
  fab: {
    margin: theme.spacing.unit, // You might not need this now
    position: "fixed",
    bottom: theme.spacing.unit * 2,
    right: theme.spacing.unit * 3
  },
  ...
});

And remove style prop from your <Fab> component as it is already mentioned in the class. As with normal HTML and CSS, it is best to keep all styling in classes to make them reusable and have better separation of concerns.

The styling applied above is again only some CSS: it fixes the element at the bottom, with spacing at the bottom and right according to your theme setting.

Update: theme.spacing.unit will be deprecated in Material UI v5. Check (and upvote) @yogescicak's answer for the updated version!

---

Related Topics