DotVVM - 多選內容被輸入覆蓋

我有DotVVM多選樣式的問題。多選的內容被輸入覆蓋，我不知道是什麼原因造成這個問題。當我使用完全相同的css類的dropdown list時，這沒有任何問題。你可以看到下面DotVVM - 多選內容被輸入覆蓋

在這裏，在圖片下拉列表結構是我的HTML結構這裏

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

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

編輯圖像，我改變了下拉列表，簡單的文字輸入在我以前的代碼結構使其更具可讀性，問題仍然是一樣的。

圖像顯示下拉列表組件，它工作正常

來源

2017-09-25 Martin

您可以附加一個示例項目嗎？ –

我會嘗試創建一些示例 – Martin

好的，我重新創建了示例項目，您可以清楚地看到它。我沒有添加我的項目樣式，因爲我們使用的是AdminLTE模板。只需點擊multiselect，你會看到這些輸入疊加多選內容列表，但下拉的罰款。你可以在這裏下載：https://drive.google.com/file/d/0B1cUMZUfg03ATzNqdVJzM2poYmM/view?usp=sharing – Martin

這是一個引導兼容性問題。 form-group與MultiSelect不集中，因此比其他組低z-index。

來源

2017-09-25 13:21:57

所以現在沒有解決方案，我必須找到解決方法 – Martin

是的。 Bootstrap爲'.form-group：focus'設置'z-index'爲'3'。你可以嘗試爲'.form-group.bp-state-focused'做同樣的事情。 –

DotVVM - 多選內容被輸入覆蓋

回答

相關問題