Выпадающее меню Bootstrap внутри модального окна обрезается внизу ⇐ CSS

[Anonymous]

Я использую собственный раскрывающийся список с множественным выбором внутри модального окна Bootstrap. Раскрывающийся список работает нормально, но когда элементов много, раскрывающееся меню обрезается в нижней части модального окна. Кажется, меню скрыто за модальной границей. Я попробовал исправления, рекомендованные в соответствующих публикациях (например, настройки границ и переопределение CSS), но в моем случае они не сработали. Эта проблема затрагивает только мой пользовательский раскрывающийся список с множественным выбором. Стандартный раскрывающийся список Bootstrap внутри того же модального окна отображается и работает правильно.
Вот моя разметка Razor:

Код: Выделить всё

@Html.ValidationMessageFor(model => model.roleIds, "", new { @class = "text-danger small" })
Select Roles



--Choose Roles--







[list]
@foreach (var role in Model.roleList)
{
[*]


@role.Text


}
[/list]

А вот CSS, который я пробовал:

Код: Выделить всё

.multi-dropdown {
background-color: #0d6efd;
color: #fff;
border: 1px solid #0d6efd;
height: 44px;
line-height: 1.6;
padding-left: 12px;
position: relative;
text-align: left !important;
}

.multi-dropdown .dropdown-arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
}

.multi-dropdown:focus,
.multi-dropdown:focus-visible {
outline: none;
border-color: #0d6efd;
box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.5);
}

.multi-dropdown-menu {
max-height: 220px;        /* fixed height */
overflow-y: auto;         /* scroll inside menu */
width: 100% !important;
min-width: 100% !important;
box-sizing: border-box;
z-index: 2000 !important; /* above modal */
position: absolute !important;
}

.multi-dropdown-menu .dropdown-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
color: #000;
}

.multi-dropdown-menu .dropdown-item:hover {
background-color: #0d6efd;
color: #fff;
}

.drop-down-downward .dropdown-menu {
top: 100% !important;
bottom: auto !important;
transform: none !important;
}

.modal,
.modal-dialog,
.modal-content {
overflow: visible !important;
}

Проблема:
Даже с учетом этих исправлений раскрывающееся меню по-прежнему обрезается, когда оно выходит за пределы модального нижнего края. Я хочу, чтобы раскрывающееся меню выглядело следующим образом:
1. Показать полностью за пределами модального окна, ИЛИ
2. Правильно прокручивайте модальное окно без обрезки.
Вопрос:
Как сделать пользовательское раскрывающееся меню Bootstrap полностью видимым внутри модального окна Bootstrap, когда в нем много элементов?
Есть ли надежный способ решить эту проблему переполнения?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -at-bottom