Я борюсь с проблемой макета.
Что я хочу?
Модальное диалоговое окно, которое растет вертикально за пределами экрана, центрируется по горизонтали и вертикали, имеет минимальное поле сверху и снизу.
Нет в документации MUI?
«Официальный» метод в MUI показывает диалоговое окно с прокруткой внутри содержимого диалогового окна, в котором кнопка действия всегда отображается на экране. Я не хочу этого Я знаю, что это может звучать вопреки рекомендациям Material Design, но в нашем приложении это имеет смысл.
Ты гуглил это?
Да
Что у меня сейчас?
У меня есть диалоговое окно, растущее за пределами экрана, и прокрутка на заднем плане, что хорошо, но у меня нет верхних / нижних полей, они растут, пока не достигнут верхних 0 (см. Скриншот 2).
Для лучшего описания этой проблемы я покажу два важных состояния: диалог, который меньше, чем область просмотра (A), и диалог, который больше, чем область просмотра (B).
Снимок экрана 1 - состояние A - желаемое состояние
Снимок экрана 2 - допустимая верхняя обработка состояния B без полей сверху / снизу
Скриншот 3 - желаемое состояние B верхнее
Снимок экрана для состояния A с проблемой добавления top / marginTop / paddingTop
Вы можете поиграть с этим примером здесь:
https://codesandbox.io/s/lxw7ylxy8z
Итак, как вы можете видеть, если я использую marginTop или верхнюю часть на бумажном элементе из MUI или paddingTop в корневом элементе свойства диалога MUI Component, то у меня есть проблема с состоянием A, небольшим диалог, который теперь выглядит не по центру.
Кроме того, нижнее поле просто не работает в состоянии B.
Я рассматриваю такие вещи, как EQCSS или делаю некоторые вычисления, основанные на вычисленном размере диалога, но я чувствую, что это должен быть лучший вариант, используя только CSS и flexbox. Дополнительная проблема в том, что я не могу вставить элементы в иерархию многоязыкового интерфейса пользователя или, по крайней мере, я не знаю как.
Надеюсь, кто-нибудь может мне помочь с этим,
Если вам нужна дополнительная информация, пожалуйста, спросите.