web-dev-qa-db-fra.com

Comment centrer le modal avec transition sur le matériau ui et le rendre réactif?

J'essaie d'utiliser le modal avec transition à l'aide de Material UI et j'ai du mal à le centrer et à le rendre réactif ou centré sur un écran de petite taille (mobile).

Le modal peut être centré et semble bon sur une petite taille s'il n'utilise pas de transition, mais si j'ajoute une transition, le modal ne peut pas être centré ou réactif.

Ceci est le code modal sans transition lien . Fonctionne bien avec un écran grand ou petit.

Il s'agit du code modal avec transition link .

J'ai essayé de modifier la valeur de top & left mais je ne parviens toujours pas à me centrer sur la grande et la petite taille de l'écran:

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

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

Quelqu'un peut-il m'aider?

cssresponsivematerial-ui-next
6
Ras

Par défaut, le modal crée un conteneur parent qui utilise flex, donc afin de centrer vous pouvez commenter votre gauche: propriété qu'il est défini sur votre modal,

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

et dans votre conteneur modal, vous pouvez aligner les articles avec ce

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

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

13
Renzo Calla

Cela a fonctionné pour moi:

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