CODEWITHSUNDEEP
cssreactjsmaterial-ui
user5090812
user5090812

Reputation: 898

Simple Material UI dialog example has unwanted scrollbar

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.

Upvotes: 6

Views: 13160

Answers (2)

Manny Alvarado
Manny Alvarado

Reputation: 1233

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

Upvotes: 3

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

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

Upvotes: 6

Related Questions