Dialog width Material UI

Question

I am not able to increase the Dialog width in Material UI. It adds horizontal scrollbar to Dialog. Is there any way to increase the width of Dailog in Material UI? Can any on help?

Siddu hadapad · Accepted Answer · 2022-01-13T04:58:11.770

188

Add two props fullWidth and maxWidth="md" in your Dialog component like this :

<Dialog
  {...your_other_props}
  fullWidth
  maxWidth="sm"
>
  {/* Your dialog content */}
</Dialog>

You can change md to sm, xs, lg and xl as per your requirement.

edited Jan 13 '22 at 04:58

answered Nov 08 '17 at 14:34

Siddu hadapad

3,023
5
15
26

Moses Schwartz · Answer 2 · 2020-06-11T14:45:48.023

17

As @mike partially mentioned you can pass down styles to specific child components (see available components for Dialog here), the body of the dialog is a Paper component so if you set the width of the Paper the dialog will be that width

//Set the styles
const useStyles = makeStyles(() => ({
  paper: { minWidth: "500px" },
}));

//Add the class to Paper
 <Dialog classes={{ paper: classes.paper}}>

This will make the dialog 500px wide.

edited Jun 11 '20 at 14:45

answered Jun 11 '20 at 12:51

Moses Schwartz

2,857
1
20
32

Or just width: "500px" & maxWidth: "100%" to preserve the responsiveness when window is smaller than the given width – Corrodian Sep 29 '21 at 09:37

score 14 · Answer 3 · answered Mar 31 '22 at 22:58

14

Just in case you don't want to use styles, here is how I achieved it.

<Dialog
   onClose={handleCloseModal}
   aria-labelledby="customized-dialog-title"
   open={open}
    sx={{
      "& .MuiDialog-container": {
        "& .MuiPaper-root": {
          width: "100%",
          maxWidth: "500px",  // Set your width here
        },
      },
    }}
  >
  
  <DialogContent />

</Dialog>

answered Mar 31 '22 at 22:58

axelmukwena

779
7
24

2

For me the best solution. Thank you! – RuntimeError Jun 30 '22 at 09:42
Also for me the best solution – James Prentice Jun 01 '23 at 05:41
I think, mui should have this by default. – Luis Jun 27 '23 at 17:17

score 9 · Answer 4 · answered Jun 08 '18 at 14:33

According to the Material-UI v1 documentation for Dialog, the maxWidth prop is likely what you need. The implementation of the Dialog component takes in an enumerated list of maxWidth values ['xs', 'sm', 'md', false]. The fullWidth prop is also available to take advantage of a full screen...likely most useful on smaller screens.

You can also get fancy and override the styles using either inline styles with style, the JavaScript keyword className to adjust the class in the DOM, the classes prop to adjust the classes inserted by MUI, or you can even adjust the width values in the theme using the overrides concept. This is all laid out in the docs with some simple examples. It might take a few tries to target your customized CSS and make it work as you expect.

Niku Alla · Answer 5 · 2022-08-15T07:26:47.860

2

You can do that by adding the PaperProps property

 <Dialog
  {...your props}
  PaperProps={{
    sx: {
      width: "100%",
      maxWidth: "720px!important",
    },
  }}>

You can change the maxWidth as per your requirement.

edited Aug 15 '22 at 07:26

answered Aug 05 '22 at 11:01

Niku Alla

21
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 09 '22 at 07:09

score 1 · Answer 6 · answered Sep 12 '22 at 08:35

I tried all the above when I faced this issue. I had to resize the Dialog in order to fit the required data nicely.

The above options didn't work for me unfortunately. I mean fullWidth maxWidth='md' was working but it was too wide for me...

What I ended up using is root class:

<Dialog open={open} className={classes.root}>

and in my styles I override like this:

export default () => ({
  root: {
    '& .MuiPaper-root': {
      width: '100%',
      maxWidth: '650px', // Set your width here
    },
  },
});

Just in case if someone facing the same issue, this was a working option for me.

score 0 · Answer 7 · answered Dec 30 '22 at 03:52

0

may be this can help :

<Dialog
    fullWidth={fullWidth}
    sx={{
      '& .css-4ygzoj-MuiPaper-root-MuiDialog-paper': {
        maxWidth: '777px', /// edit here
      },
    }}
    open={open}
    onClose={handleClose}
    scroll="paper"
  >

answered Dec 30 '22 at 03:52

nurhamsah

1

score 0 · Answer 8 · answered Feb 06 '23 at 20:32

Adding a style attribute with overflowY: "clip" worked for me

<Dialog fullWidth>
  <DialogTitle>Title</DialogTitle>
  <DialogContent
     style={{overflowY: "clip"}}
  >
  ...
  </DialogContent>
</Dialog>

Full disclosure... I know just enough about Material-UI to be dangerous.

Dialog width Material UI

8 Answers8