How can I make Dialog take 80% of the screen in Material-UI?

11,071

Solution 1

For older material-ui versions like 0.20.0:

<Dialog
   title="Dialog With 80% Width"
   modal={true}
   contentStyle={{
      width: '80%',
      maxWidth: 'none',
   }}
   open={true}
>
   This dialog spans the 80% width of the screen.
</Dialog>

And in material-ui V1 using these props may can help with your needs

fullWidth={true}
maxWidth = {'md'}

Here is examples and other props for Dialog component, or in more advanced way you can take a look into Dialog component code see what is happening there.

Solution 2

The paperFullWidth css class of Dialog component might be helpful. The only condition for using this class is the fullWidth prop of Dialog component should be true. Below is a sample snippet

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  dialogCustomizedWidth: {
    'max-width': '80%'
  }
});

const DialogExample = ({ classes }) => (
  <Dialog
    open
    fullWidth
    classes={{ paperFullWidth: classes.dialogCustomizedWidth }}
  >
    I'm a Dialog with customized width.
  </Dialog>
);

export default withStyles(styles)(DialogExample);
Share:
11,071

Related videos on Youtube

Usama Tahir
Author by

Usama Tahir

Software Engineer currently working as a Full STACK developer at GoSaas.

Updated on June 04, 2022

Comments

  • Usama Tahir
    Usama Tahir about 2 years

    I am working with Material-UI Dialog and I want to make it take 80% of the screen. Ideally, I want something like this.enter image description here

    I am applying a margin to Dialog but it is not working as intended.