1

Всем привет! У меня имеется приложение и кнопка при клике на которую появляется модальное окно(в нем содержатся продукты взятые из store(redux)). При открытии модального окна продукты занимают много места(больше чем размер модального окна) и соответственно в окне показывается только часть продукции, остальная часть не отображается.(см. скриншот) Подскажите пожалуйста способ, каким образом можно сделать скролл модального окна. Пробовал через стили, не работает. Может можно сделать через React.createRef() через родительский компонент или я ошибаюсь...Modal window.

1 ответ 1

1

здесь как раз вопрос стилей. модальное окно не скроллится, потому что оно имеет свободную высоту и не ограничена скроллом. установите этому модальному окну фиксированую высоту(например, height: 100vh или же ограничение на высоту (max-height: 100vh) и у вас появится возможность скролла этого окна.

4
  • Спасибо за ответ, к сожалению не работает
    – AzetX
    15 ноя 2020 в 16:26
  • у моего окна вот такие стили: 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 }
    – AzetX
    15 ноя 2020 в 16:26
  • 1
    добавьте к моему ответу еще стиль overflow: scroll модальному окну 15 ноя 2020 в 16:33
  • 1
    Дай Бог вам Здоровья!
    – AzetX
    15 ноя 2020 в 16:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.