How to center modal with transition on material ui and make it responsive?

Question

I trying to use modal with transition using Material UI and have problem to centering it and also make it responsive or center in small size screen (mobile).

Modal can be centered and looks good on small size if not using transition, but if i add a transition, modal can't be centered or responsive.

This is the code modal without transition link. Works good with large or small screen size.

This is the code modal with transition link.

I tried to change the value of top & left but still can't get centered at the large and small screen size :

function getModalStyle() {
  const top = 25;
  const left = 25;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

Can anyone help me?

score 36 · Accepted Answer · edited Jul 29 '19 at 18:51

36

By default the modal creates a parent container that uses flex, so in order to center you can comment your left: property that it is set to your modal,

return {
    top: `${top}%`,
    margin:'auto'
    // left: `${left}%`,
    // transform: `translate(-${top}%, -${left}%)`,
  };

and in your modal container you can align items with this

 <Modal
    ...
    style={{display:'flex',alignItems:'center',justifyContent:'center'}}
  >

https://stackblitz.com/edit/react-1ny5g7?file=demo.js

edited Jul 29 '19 at 18:51

Axalix

2,831
1
20
37

answered Jun 20 '18 at 13:17

Renzo Calla

7,486
2
22
37

4

Seems the parent container is default `display: block` now, so I had to also add `display: flex` to the modal for it to work. – Geir Sagberg Feb 07 '19 at 09:56
is there any library | npm package that can get these feature done with much smooth and easy – Nilupul Heshan Jan 01 '21 at 07:07

score 1 · Answer 2 · answered Apr 30 '21 at 14:14

1

This works for me:

function getModalStyle() {
  return {
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };
}

answered Apr 30 '21 at 14:14

Harry

1,021
4
21
41

score 0 · Answer 3 · answered Mar 23 '20 at 11:09

0

This worked for me:

{
    width: '100%',
    maxWidth: '100vw',
    maxHeight: '100%',
    position: 'fixed',
    top: '50%',
    left: '0',
    transform: 'translate(0, -50%)',
    overflowY: 'auto'
}

answered Mar 23 '20 at 11:09

Lance

701
6
25

How to center modal with transition on material ui and make it responsive?

3 Answers3