Dialog width material-ui next
Material UiMaterial Ui Problem Overview
I am not able to increase the Dialog width in material-ui next. it adds horizontal scrollbar to Dailog. is there any way to increase width of Dailog in material-ui next? Can any on help?
Material Ui Solutions
Solution 1 - Material Ui
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.
Solution 2 - Material Ui
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.
Solution 3 - Material Ui
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.
Solution 4 - Material Ui
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>