Всем привет!
У меня имеется приложение и кнопка при клике на которую появляется модальное окно(в нем содержатся продукты взятые из store(redux)). При открытии модального окна продукты занимают много места(больше чем размер модального окна) и соответственно в окне показывается только часть продукции, остальная часть не отображается.(см. скриншот)
Подскажите пожалуйста способ, каким образом можно сделать скролл модального окна. Пробовал через стили, не работает. Может можно сделать через React.createRef()
через родительский компонент или я ошибаюсь....
Добавить комментарий
|
1 ответ
здесь как раз вопрос стилей.
модальное окно не скроллится, потому что оно имеет свободную высоту и не ограничена скроллом. установите этому модальному окну фиксированую высоту(например, height: 100vh
или же ограничение на высоту (max-height: 100vh
) и у вас появится возможность скролла этого окна.
-
-
у моего окна вот такие стили: const MODAL_STYLES = { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: 'white', padding: '50px', zIndex: 1000 } const OVERLAY_STYLE = { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, .7)', zIndex: 1000 }– AzetX15 ноя 2020 в 16:26
-
1
-
1