DotVVM - बहुआयामी सामग्री इनपुट द्वारा ओवरले किया गया है - एचटीएमएल, सीएसएस, ड्रॉप-डाउन-मेन्यू, बहु-चयन, dotvvm

मुझे DotVVM मल्टीइलेक्ट स्टाइल के साथ समस्या है। मल्टीइलेक्ट की सामग्री इनपुट द्वारा ओवरलेड की जाती है और मुझे नहीं पता कि इस समस्या का कारण क्या है। जब मैं उपयोग करता हूं dropdown list जो वास्तव में एक ही सीएसएस कक्षाओं का उपयोग करता है, इसमें कोई समस्या नहीं है। आप नीचे चित्र में ड्रॉपडाउन सूची संरचना देख सकते हैं

यहां मेरी एचटीएमएल संरचना है

<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>

सीएसएस कोड यहाँ

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

छवि संपादित की गई है, मैंने अपनी पिछली कोड संरचना में ड्रॉप टेक्स्ट सूची को सरल पाठ इनपुट में बदल दिया ताकि इसे और अधिक पठनीय बनाया जा सके, समस्या अभी भी वही है। यहां छवि विवरण दर्ज करें

छवि ड्रॉपडाउन सूची घटक दिखा रही है, जो ठीक काम करती है

यहां छवि विवरण दर्ज करें

उत्तर:

उत्तर № 1 के लिए 1

यह एक बूटस्ट्रैप संगतता मुद्दा है form-group साथ में MultiSelect फोकस करने योग्य नहीं है और इसलिए कम है z-index अन्य समूहों की तुलना में।


संबंधित सवाल
सबसे लोकप्रिय