Simple Material UI dialog example has unwanted scrollbar

Question

I have a simple Material UI dialog containing a grid, and it has a scrollbar that can scroll a few pixels even though the screen is big enough to contain the whole thing.

      <Dialog open={isOpen} onClose={() => changeIsOpen(false)}>
        <DialogContent>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <TextField label="First Name" fullWidth />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField label="Last Name" fullWidth />
            </Grid>
            <Grid item xs={12}>
              <TextField label="Username" fullWidth />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button
            color="secondary"
            variant="contained"
            onClick={() => changeIsOpen(false)}
          >
            Cancel
          </Button>
          <Button
            color="primary"
            variant="contained"
            onClick={() => changeIsOpen(false)}
          >
            OK
          </Button>
        </DialogActions>
      </Dialog>

This code is at https://codesandbox.io/s/cool-cherry-or0r8 for you to see.

I don't want to use overflow: hidden, because if the page is too small, there will be a scrollbar and that's correct. (Not likely to happen in this toy example with 3 fields, but easily possible in larger dialogs).

I think the problem has something to do with interactions between flexbox and the negative margins that <Grid> uses, but I can't quite work it out.

Is the `spacing` necessary? One solution you could do to remove the scrollbar would be to remove that property from the Grid container. Another thing would be to set a min-height value for the Grid container as a root style — Ariel Salem, May 15 '19 at 19:48
I see, so removing `spacing` does fix it. But with that, my First Name and Last Name fields run together (if the page is on the sm breakpoint or higher). — user5090812, May 15 '19 at 19:58

Dhaval Jardosh · Answer 1 · 2020-07-10T01:57:21.483

UPDATE:

DialogContent seems to be the culprit here, we can simply try replacing <DialogContent/> with a <div/> given below

<div style={{ padding: 20, overflow: "scroll" }}>
  <Grid container spacing={3}>
    <Grid item xs={12} sm={6}>
      <TextField label="First Name" fullWidth />
    </Grid>
    <Grid item xs={12} sm={6}>
      <TextField label="Last Name" fullWidth />
    </Grid>
    <Grid item xs={12}>
      <TextField label="Username" fullWidth />
    </Grid>
  </Grid>
</div>;

DISREGARD THIS SOLUTION:

Replace your DialogContent with the following:

<DialogContent>
  <div style={{ overflow: "hidden", height: "100%", width: "100%" }}>
    <div
      style={{
        paddingRight: 17,
        height: "100%",
        width: "100%",
        boxSizing: "content-box",
        overflow: "scroll"
      }}
    >
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
          <TextField label="First Name" fullWidth />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField label="Last Name" fullWidth />
        </Grid>
        <Grid item xs={12}>
          <TextField label="Username" fullWidth />
        </Grid>
      </Grid>
    </div>
  </div>
</DialogContent>

Demo: https://codesandbox.io/s/09ng6

Credit to this answer: https://stackoverflow.com/a/16671476/7427111

This solution is not good. The author posted he didn't want to use overflow:hidden. I tried it in my case, didn't work. It still scrolls even thought the scrollbar doesn't show. — Manny Alvarado, Jul 10 '20 at 00:42
Please create a question so we can know what's going on. Could be a different case. There is nothing wrong to use overflow hidden if you can achieve what you're looking for. — Dhaval Jardosh, Jul 10 '20 at 01:20
Overflow hidden only hides the scrollbar. You can still scroll on the affected div or element. This is not a solution. — Manny Alvarado, Jul 10 '20 at 01:22
Just checked, and yes you correct. The scroll still happens and doesn't address the question. Working on it, will let you know soon. Thank you for bringing this to my attention. — Dhaval Jardosh, Jul 10 '20 at 01:39

Manny Alvarado · Answer 2 · 2020-07-11T23:41:51.800

There's a workaround posted in material ui's github. I consider it a hotfix, still not a solution, but it works for me.

The problem with my Grid container is that on spacing 4, the rendered element has a -16px margin. So you'd want to counteract that margin with some padding.

<div style={{ padding:8 }}>
  <Grid container spacing={4}>

This will do the trick. I used 8px because spacing 4 will render a -16px margin. Hopefully the Material-UI collaborators will offer a better solution in the future.

Reference to the hotfix here: https://github.com/mui-org/material-ui/issues/7466 https://material-ui.com/components/grid/#negative-margin

Thank you, this was my issue as well though I had to use a a padding of 16 to accommodate the -16 margin the 8 still gave an overflow. — hurlbz, Jul 21 '21 at 13:31

Simple Material UI dialog example has unwanted scrollbar

2 Answers2

UPDATE:

Linked