Material-ui: [Dialog] How to modify max width of dialog box?

[ghost]

Currently I have the Dialog props set to:

 title="Dialog" 
              modal = {true}
              actions={standardActions}
              autoDetectWindowHeight={false} 
              autoScrollBodyContent={false}
              contentStyle={{width: 700}}
              ref="addNewDialog"

If I change contentStyle={{width: 700}} it will not widen. But if I change it to something really small, like 10 px, it works. Does anyone know how I can set it to a much bigger display?

[metalmatze]

<Dialog
title="Dialog" 
modal = {true}
actions={standardActions}
autoDetectWindowHeight={false} 
autoScrollBodyContent={false}
style={{width: 700}}
ref="addNewDialog">

Use style instead of contentStyle?

[ghost]

Unfortunately, that only lets me set it a big bigger. I'm looking to make it span across almost the entirety of the page.

[shaurya947]

@Thomsos here's how:

<Dialog
    title="Dialog" 
    modal = {true}
    autoDetectWindowHeight={false} 
    autoScrollBodyContent={false}
    contentStyle={{width: "100%", maxWidth: "none"}}
/>

If you look at src/dialog.jsx lines 141 and 142, styles.content is what you want to override with the contentStyle prop.

Let me know if that works

[ghost]

@shaurya947 This worked perfectly! Thank you very much for your help!

[pricetula]

I added this to Drawer component contentStyle={{width: "100%", maxWidth: "none"}} didnt work :(

[jonshkreli]

I am having the same issue.
style={{width: "100%", maxWidth: "none"}} do not work.

I want to make dialog 100% height and weight. I even tried 100vh/vw maxWidth/Height 100%/100vh/vw/1000px,etc but no good result

adding something like 1000px just moves dialog from center to another position.

[msafrin3]

add div after Dialog and put a size on in

                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                    maxWidth="false"
                >
                    <div style={{width: 500}}>
                        <DialogTitle id="alert-dialog-title">{this.props.title}</DialogTitle>
                        <DialogContent>
                            <DialogContentText id="alert-dialog-description">
                                {this.props.message}
                            </DialogContentText>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={this.handleClose} color="primary" autoFocus>
                                Close
                            </Button>
                        </DialogActions>
                    </div>
                </Dialog>

[MohitKS5]

@msafrin3 This doesn't work for width more than 600 , thats what the question says, it works upto some limit whcih is 600 if you see inspect element.

[FethiEfe]

I passed maxWidth = "md" inside of Dialog and it is wider now.

[yoni333]

maxWidth accept the bootstrap sizes sm , md , lg xl
so as people write above - maxWidth = "md" is working
and also maxWidth = "xl" etc.

[shashikant88093]

title="Dialog"
fullwidth={true}
maxWidth ={"md"}>
try this one

[darknightdev]

i guess you can override paper styles <Dialog classes={{ paper: classes.paper }}>...</Dialog> and set width in the class paper

[dandgerson]

add div after Dialog and put a size on in

<Dialog
  open={this.state.open}
  onClose={this.handleClose}
  aria-labelledby="alert-dialog-title"
  aria-describedby="alert-dialog-description"
  maxWidth="false"
>
  <div style={{width: 500}}>
    <DialogTitle id="alert-dialog-title">{this.props.title}</DialogTitle>
    <DialogContent></DialogContent>
  </div>
</Dialog>

Thats great and work perfectly!

[kokobah]

@msafrin3 it works for width, but it doesn't work for height