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

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)