После открытия модальной боковой панели «обрезается». Как сделать так, чтобы высота боковой панели была адаптивной? - PullRequest
Новая
       8

После открытия модальной боковой панели «обрезается». Как сделать так, чтобы высота боковой панели была адаптивной?

0 голосов
/ 28 февраля 2020

После открытия модальной стороны моя боковая панель выглядит так:

enter image description here

Интересно, что я могу с этим поделать? Модалы расположены вне тега body (потому что я размываю все содержимое, расположенное в div, под названием "blur-container2"). Так что все вещи, кроме модальных, находятся в "blur-container2".

Упрощенная структура выглядит так: 

<html>
<body>
<div class="blur-container2"></div>
</body>
//Modals are here//
</html>

Мое тело и html css код: 

body, html {
    height: 100%;
    color: black;
}

Контейнер, в котором расположена боковая панель: 

.blur-container2 {
    background-image: url(http://southernhoopsreport.com/wp-content/uploads/2018/11/156689-download-white-gradient-background-2447x1468-1080p.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover!important;
    background-position: center;
    display: block;
    overflow: auto;
    height: 100%!important;
}

Модальный css: 

.modal {


   border-radius: 17px;
    background-color: rgb(255, 255, 255)!important;
    backdrop-filter: blur(15px);
    color: rgb(0, 0, 0);
        overflow-y: auto;
    width: 55%;
    max-height: 70%;
    margin: auto;
    padding: 0;
    border-radius: 2px;
    background-color: #fafafa;
    will-change: top,opacity;
}

Наложение модели: 

.modal, .modal-overlay {
    position: fixed;
    left: 0;
    display: none;
    right: 0;
}

1 Ответ

0 голосов
/ 02 марта 2020

Да, кажется неправильным иметь модалы вне тела, но я нашел решение. Моя проблема заключалась в том, что у div "blue-container2", внутри которого у меня были все остальные вещи, было это css значение: display: block.

Так вот что стало причиной этой проблемы с обрезкой боковой панели. Когда я это удалил - боковая панель стала "отзывчивой".

...