DotVVM - 다중 선택 내용이 입력으로 오버레이됩니다.

Question

DotVVM 다중 선택 스타일에 문제가 있습니다. 다중 선택의 내용은 입력에 의해 오버레이되며,이 문제의 원인을 알지 못합니다. 정확히 동일한 CSS 클래스를 사용하는 dropdown list을 사용할 때 문제가 없습니다. 당신은 여기

아래 그림에서 드롭 다운 목록 구조를 볼 수있는 것은 내 HTML 구조

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

이미지 편집 여기

<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 코드입니다, 내 이전에 간단한 텍스트 입력에 드롭 다운 목록을 변경 코드 구조를 좀 더 읽기 쉽도록 만들기 위해서는 문제가 여전히 동일합니다. 그것은 부트 스트랩 호환성 문제입니다

Answer 1

잘 작동 드롭 다운 목록 구성 요소를 보여주는

이미지. form-group에 MultiSelect은 포커스 가능하지 않으므로 다른 그룹보다 z-index이 낮습니다.