How to change the position of material-ui's dialog?

Question

Using material-ui in my react app, is there a way I can change the position when the dialog is opened? now it's always centered.

Thanks in advance!

Cumulative

Answer 1

You can create styles and pass it through classes prop. Here is an example of how you could do that.

import React from 'react';
import { makeStyles, Dialog } from '@material-ui/core';

const useStyles = makeStyles({
  dialog: {
    position: 'absolute',
    left: 10,
    top: 50
  }
});


function Example() {
  const classes = useStyles();

  return (
    <Dialog
      classes={{
        paper: classes.dialog
      }}

      /* rest of the props */
    >
      {/* content of the dialog */}
    </Dialog>
  );
}

Vallie

" classes={{ paper: classes.dialog }}".what does the "paper" do here? – Cumulative

As you can see in an official documentation (material-ui.com/api/dialog), it is the way to override the styles of the Paper component that's used inside the Dialog. – Vallie

" dialog: { position: "absolute", left: "50%", top: "50%", transform: "translate(-75%,-50%)", }" Why doesn't the transform work here? – Cumulative

Not sure. Works for me. Maybe try with transform: "translate(-75%,-50%) !important". – Vallie

Cool, it's working after adding important. Really appreciate your answers! – Cumulative

position:'absolute' and important shoul not be used, they can break the normal behaviour of the component. Please consider using flex properties to do the same thing – Unveiling

Answer 2

I would say don't use position: absolute, it could break the scrolling behavior. The position was control differently with scroll='paper' or scroll='body'

You can use the following code to always align your dialog to the top of the page with two custom classes.

• Demo: codesandbox.io
• See the original article with explanation

const useStyles = makeStyles({
  topScrollPaper: {
    alignItems: 'flex-start',
  },
  topPaperScrollBody: {
    verticalAlign: 'top',
  },
})

function SimpleDialog(props: SimpleDialogProps) {
  const classes = useStyles()
  return (
    <Dialog
      onClose={handleClose}
      aria-labelledby="simple-dialog-title"
      open={open}
      scroll="paper"
      classes={{
        scrollPaper: classes.topScrollPaper,
        paperScrollBody: classes.topPaperScrollBody,
      }}
    ></Dialog>
  )
}

Sile

Hi , how about position to bottom , is like this ? alignItems: 'flex-end' verticalAlign: 'bottom', ???? or verticalAlign: 'top ' still . – Linstock

Answer 3

For MUI 5, we can use both SxProps and styled() utility:

Via SxProps:

import { SxProps } from "@mui/material";

// flex-start: to position it at the top
// flex-end: to position it at the bottom
// center: to position it at the center

const sx: SxProps = {
   "& .MuiDialog-container": {
     alignItems: "flex-start"
   }
};
<Dialog
    open={infoModalOpen}
    onClose={() => setInfoModalOpen(false)}
    sx={sx}
    scroll="paper"
>
  ....
</Dialog>

Via styled components:

import styled from "@mui/system/styled";

const StyledDialog = styled(Dialog)(({theme}) => ({
    "& .MuiDialog-container": {
      alignItems: "flex-start"
    }
}));

<StyledDialog
   open={infoModalOpen}
   onClose={() => setInfoModalOpen(false)}
   sx={sx}
   scroll="paper"
 >
  ....
</StyledDialog>

Sylvan

Answer 4

@radovix's and @Sumit Wadhwa's answers are correct. In case you don't want to use makeStyles, Here is how I resolved it.

When scroll="body";

<Dialog
  fullWidth
  onClose={() => setOpen(false)}
  open={true}
  scroll="body"
  PaperProps={{ sx: { mt: "50px", verticalAlign: "top" } }}
>
  {/* Dialog Content here */}
</Dialog>;

When scroll="paper";

<Dialog
  fullWidth
  onClose={() => setOpen(false)}
  open={true}
  scroll="paper"
  sx={{
     "& .MuiDialog-container": {
        alignItems: "flex-start",
     },
  }}
  PaperProps={{ sx: { mt: "50px" } }}
>
  {/* Dialog Content here */}
</Dialog>;

You can adjust the margin-top however you like

Reinforce

Answer 5

You can add MuiDialogActions Properties inside the theme so change it for all Dialogs inside the project, with the following:

 components: {
MuiDialogActions: {
  styleOverrides: {
    root: {
      display: "flex",
      flexWrap: "wrap",
      gap: "8px",
      justifyContent: "start",
      "&>.MuiButtonBase-root": {
        marginLeft: 0,
      },
    },
  },
},

Designed