CODEWITHSUNDEEP
reactjsmaterial-ui
Smarticles101
Smarticles101

Reputation: 1926

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

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.

Upvotes: 59

Views: 104699

Answers (5)

Andy Lorenz
Andy Lorenz

Reputation: 3084

Some of the answers seem so overly complex, here's a quick and clean in-line method that works for MUI v4 and possibly for v5 too:

<Dialog
  open={true}
  onClose={onClose}
  ... and other props
  PaperProps={{ style: {
    minHeight: '90%',
    maxHeight: '90%',
  }}}
>

Upvotes: 8

Ken Gregory
Ken Gregory

Reputation: 7400

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.

Upvotes: 86

NearHuscarl
NearHuscarl

Reputation: 81773

In MUI v5, you can override the max-height value of the inner Paper component by using this code:

<Dialog
  PaperProps={{
    sx: {
      width: "50%",
      maxHeight: 300
    }
  }}
  {...other}
>

Live Demo

Edit 47698037/how-can-i-set-a-height-to-a-dialog-in-material-ui

Upvotes: 39

Ivan Sivak
Ivan Sivak

Reputation: 7498

If you're using a newer version of material-ui use this:

import MuiDialog from '@material-ui/core/Dialog';

const Dialog = withStyles((theme) => ({
  paper: {
    height: '100%' // 100% is for full height or anything else what you need
  },
}))(MuiDialog);

export default function SomeComponentThatUsesCustomizedDialog() {
    return (
        <Dialog>
        ...
        </Dialog>
    )
}

The dialogPaper prop used in the accepted answer doesn't work for me and throws an error in the console (we're using material-ui v.4.11+, where it's not even listed in the official dialog css api docs). Hence, use the paper prop instead.

Inspired by official example.

Upvotes: 0

lowcrawler
lowcrawler

Reputation: 7599

Set the height of the DialogContent child instead. The dialog will grow to contain its contents. You can do this with css / classname, etc... but to do it inline, here is a code-snippet:

<Dialog
        open={open}
        fullWidth
        maxWidth='lg' // set width according to defined material ui breakpoints
        onClose={handleClose}
>
        <DialogContent
        style={{height:'600px'}}> // set height by pixels, percentage, etc
            //insert content here
        </DialogContent>
</Dialog>

Upvotes: 22

Related Questions