DotVVM - Multiselect Inhalt wird durch Eingabe überlagert - html, css, drop-down-menü, multi-select, dotvvm

Ich habe ein Problem mit DotVVM Multiselect Styling. Inhalt von Multiselect wird von Eingabe überlagert und ich weiß nicht, was dieses Problem verursacht. Wenn ich benutze dropdown list das verwendet genau die gleichen CSS-Klassen, es gibt kein Problem damit. Sie können Dropdown-Listenstruktur im Bild unten sehen

Hier ist meine HTML-Struktur

<div class="form-group">
<Label>
<dot:Literal Text="{{value: Article.Article_Sections}}" />
</Label>
<div class="input-group">
<bp:MultiSelect DataSource="{value: ArticleSectionsList}"
SelectedValues="{value: SelectedArticleSections}"
ItemTextBinding="{{value: Name}}"
ItemKeyBinding="{{value: Id}}"
class="form-control " />
</div>
</div>
<div class="form-group">
<Label>
<dot:Literal Text="{{value: DetailDTO.Name}}" />
</Label>
<div class="input-group" Validator.Value="{{value: DetailDTO.Name}}">
<dot:TextBox class="form-control" Text="{{value: DetailDTO.Name}}" />

</div>
</div>

CSS-Code hier

.form-group {
position: relative;
}

.input-group {
position: relative;
display: table;
border-collapse: separate;
}

.dotvvm-bp-multi-select .bp-popup {
display: none;
padding: 5px 2px;
position: fixed;
overflow: hidden;
border-collapse: collapse;
border: 1px solid #808080;
border-radius: 0;
background-color: #fff;
color: #1a1a1a;
font-weight: normal;
cursor: default;
margin-top: 1px;
z-index: 1001;
text-align: left;
}
//here is css for opened state
.dotvvm-bp-multi-select .bp-popup.bp-state-opened {
display: block;
z-index: 1001;
}

.dotvvm-bp-multi-select .bp-popup.bp-has-list > ul {
list-style: none;
overflow-x: hidden;
padding: 5px 2px;
max-height: 250px;
margin: 0;
}

Das Bild wird bearbeitet, ich ändere die Dropdown-Liste in einfache Texteingabe in meiner vorherigen Codestruktur, um es lesbarer zu machen, das Problem ist immer noch das gleiche. Bildbeschreibung hier eingeben

Das Bild zeigt die Dropdown-Listenkomponente, was gut funktioniert

Bildbeschreibung hier eingeben

Antworten:

1 für die Antwort № 1

Es ist ein Bootstrap-Kompatibilitätsproblem form-group mit MultiSelect ist nicht fokussierbar und daher niedriger z-index als die anderen Gruppen.


Verwandte Fragen
Speisekarte