How can I set a height to a Dialog in Material-UI?

Question

I'm going with the Material-UI example for a Dialog with a custom width:

const customContentStyle = {   width: '100%',   maxWidth: 'none', };  // some omitted code  <Dialog   title="Dialog With Custom Width"   actions={actions}   modal={true}   contentStyle={customContentStyle}   open={this.state.open} >   This dialog spans the entire width of the screen. </Dialog> 

I know that I'm able to set a custom width because I've overridden the maxWidth, however I want to be able to do the same with the height so that I can resize the height of the dialog. I've tried setting the maxHeight to none and setting height, but I've had no luck with it.

Answer 1

You need to override some of the default behavior of the Dialog. Its paper class implements a flexbox with a columnar flex-direction and defines a max-height of 90vh. This allows the Dialog to grow to its content and present scrollbars once it reaches 90% of the viewport's visible height.

If you need to set the Dialog height to some percentage of the viewport, override the paper class, defining min-height and max-height in a manner similar to the example below:

import PropTypes from 'prop-types'; import { withStyles } from 'material-ui/styles'; import Dialog from 'material-ui/Dialog';  const styles = {     dialogPaper: {         minHeight: '80vh',         maxHeight: '80vh',     }, };  const YourDialog = ({ classes }) => (     <Dialog classes={{ paper: classes.dialogPaper }}>         <div>dialogishness</div>     </Dialog> );  export default withStyles(styles)(YourDialog); 

This will ensure that the Dialog's height is 80% of the viewport.