Как центрировать модал с переходом на материал пользовательского интерфейса и сделать его отзывчивым?
Я пытаюсь использовать модальное с переходом с использованием Material UI и имею проблему с его центрированием, а также сделать его отзывчивым или центрировать его на экране небольшого размера (мобильный).
Модальный может быть центрирован и хорошо смотрится на небольшом размере, если не использовать переход, но если я добавляю переход, модальный не может быть центрирован или отзывчив.
Это модальный код без переходной ссылки. Хорошо работает с большим или маленьким размером экрана.
Это модальный код с переходной ссылкой.
Я пытался изменить значение top
& left
но все еще не может быть в центре на большом и маленьком размере экрана:
function getModalStyle() {
const top = 25;
const left = 25;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
Может кто-нибудь мне помочь?
3 ответа
По умолчанию модал создает родительский контейнер, который использует flex, поэтому для центрирования вы можете прокомментировать свойство left: для него установлено модальное значение,
return {
top: `${top}%`,
margin:'auto'
// left: `${left}%`,
// transform: `translate(-${top}%, -${left}%)`,
};
и в вашем модальном контейнере вы можете выровнять элементы с этим
<Modal
...
style={{alignItems:'center',justifyContent:'center'}}
>
Это работает для меня:
function getModalStyle() {
return {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
};
}
Это сработало для меня:
{
width: '100%',
maxWidth: '100vw',
maxHeight: '100%',
position: 'fixed',
top: '50%',
left: '0',
transform: 'translate(0, -50%)',
overflowY: 'auto'
}