Das Bootstrap-Dropdown-Menü im Modal wird unten abgeschnitten ⇐ CSS

[Anonymous]

Ich verwende ein benutzerdefiniertes Mehrfachauswahl-Dropdown in einem Bootstrap-Modal. Das Dropdown-Menü funktioniert einwandfrei, aber wenn es viele Elemente gibt, wird das Dropdown-Menü am unteren Rand des Modals abgeschnitten.
Es scheint, dass das Menü hinter der Modalgrenze verborgen ist. Ich habe die in verwandten Beiträgen empfohlenen Korrekturen ausprobiert (z. B. Grenzeinstellungen und CSS-Überschreibungen), aber sie haben in meinem Fall nicht funktioniert. Dieses Problem betrifft nur mein benutzerdefiniertes Mehrfachauswahl-Dropdown, ein Standard-Bootstrap-Dropdown innerhalb desselben Modals, das korrekt gerendert und verhält.
Hier ist mein Razor-Markup:

Code: Select all

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



--Choose Roles--







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


@role.Text


}
[/list]

Und hier ist das CSS, das ich ausprobiert habe:

Code: Select all

.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;
}

Problem
Selbst mit diesen Korrekturen wird das Dropdown-Menü immer noch abgeschnitten, wenn es über den unteren Teil des Modals hinausragt.
Ich möchte, dass das Dropdown-Menü entweder:

• vollständig außerhalb des Modals angezeigt wird ODER
• richtig innerhalb des Modals scrollt, ohne abgeschnitten zu werden

Frage
Wie kann ich ein benutzerdefiniertes Bootstrap-Dropdown-Menü in einem Bootstrap-Modal vollständig sichtbar machen, wenn viele Elemente vorhanden sind?
Gibt es eine zuverlässige Möglichkeit, dieses Überlaufproblem zu beheben?