Диалог имеет две полосы прокрутки, но я хочу одну - PullRequest
Новая
       65

Диалог имеет две полосы прокрутки, но я хочу одну

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

Я сделал диалог и дал ему фиксированную высоту. Я бы хотел сохранить эту высоту, но у меня есть две полосы прокрутки и только одна для прокрутки.

Вот мой HTML код: 

<div class="modal fade dialog-layout-modal-body" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" #modal>
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content dialog-layout-modal-body">
            <div class="modal-header">
            <h5 class="modal-title">Add new item</h5>
            <button type="button" class="close" (click)="close()" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>
        </div>
    </div>
</div>

Вот эта css код: 

@media (min-width: 768px) {
    .dialog-layout-modal-body {
      overflow-y: auto;
      max-height: 662px;
    }
}

enter image description here

Как решить проблему, оставив только одну полосу прокрутки, но сохранив высоту диалогового окна?

1 Ответ

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

Если ваш элемент body получает класс с именем modal-open, когда модель показывает, используйте ниже css, чтобы скрыть полосу прокрутки body. 

body.modal-open {
   height: 100vh;
   overflow-y: hidden;
}

100vh делает рост тела 100% от области просмотра. Подробнее на CSS -Трюки .

...