无法在表格中显示Combobox

时间:2016-06-21 06:16:58

标签: html css combobox

今天,我随时都会创建类似Combobox的。而且我不知道我无法显示所有可供选择的项目。

你可以看起来像:

似乎隐藏在桌子后面的ComboBox中的所有项目。

HTML code:

<div class="btn-group open">
   <button type="button" class="multiselect dropdown-toggle btn btn-white btn-primary" 
          data-toggle="dropdown" title="None selected" aria-expanded="true">None selected 
          <b class="fa fa-caret-down"></b>
   </button>
   <ul class="multiselect-container dropdown-menu">
      <li><label class="checkbox">Checkbox</label></li>
      <li><label class="checkbox">
          <input type="checkbox" class="ace" value="0"><span class="lbl"></span> STT</label></a> 
      </li>
   </ul>
</div>

CSS代码:

.btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.multiselect-container {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.multiselect-container>li {
    padding: 0;
}

li {
    display: list-item;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    padding: 5px 0;
    margin: 2px 0 0;
}

如何在我的情况下显示ComboBox的所有项目?感谢。

1 个答案:

答案 0 :(得分:1)

检查相关元素的z-index属性。您想要出现在前面的元素应该具有比您想要的元素更大的z-index属性。