[Dialog] How to modify max width of dialog box?

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?

Issue Analytics

State:
Created 8 years ago
Reactions:4
Comments:17 (2 by maintainers)

Top GitHub Comments

38reactions

msafrin3commented, Jun 17, 2020

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>

19reactions

metalmatzecommented, Mar 2, 2017

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

Use style instead of contentStyle?

Top Results From Across the Web

Dialog width material-ui next - Stack Overflow

Add two props fullWidth and maxWidth="md" in your Dialog component ... You can change md to sm , xs , lg and xl...

[Dialog] How to modify max width of dialog box? #1467 - GitHub

Currently I have the Dialog props set to: title="Dialog" modal = {true} actions={standardActions} autoDetectWindowHeight={false} ...

How to Size and Position the MUI Dialog Component - Medium

We can change this by passing fixed positioning to the Paper component, once again passing sx to the Dialog's PaperProps . <Dialog PaperProps={{ ......

Dialog API - Material UI - MUI

Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth ....

jQuery UI Dialog maxWidth Option - GeeksforGeeks

The jQuery UI Dialog maxWidth option is used to set the maximum width to which the dialog can be resized in pixels. Syntax:....