Question

我用手风琴实现了Bootstrap-Select Dropdown。以下是代码：

HTML：

<div class="row">
  <div class="col-lg-12">
    <div id="accordionGESearch" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
      <h3 class="ui-accordion-header ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" id="ui-id-1" aria-controls="geoFenceSearchContainer" aria-selected="true" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Search Criteria</h3>
      <div id="searchContainer" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block;" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">
        <div class="row">
          <div class="col-lg-2"><label>Dropdown</label></div>
          <div class="col-lg-2"> 
            <select id="ddl" class="selectpicker">  
              <option value="0">Select</option>
              <option value="1">A</option>
              <option value="2">B</option>
              <option value="3">C</option>
              <option value="4">D</option>
              <option value="11">E</option>
              <option value="12">F</option>
              <option value="13">G</option>
              <option value="14">H</option>
            </select>
          </div>
          <div class="col-lg-8"></div>
        </div>
      </div>
    </div>
  </div>
</div>

JS：

$('.selectpicker').selectpicker({
    style: 'btn-primary',
    size: 2
});

CSS：

.dropdown-menu .open
{ z-index: 9999 !important;}

.dropdown-menu .inner
{ z-index: 9999 !important;}

但是dropdown-menu并没有超过手风琴，而是显示在下方，并且必须滚动容器以查看下拉列表的内容。我已尝试将z-index的{{1}}添加到dropdown-menu，但它不起作用。我甚至都在搜索问题的任何解决方案，但没有一个答案对我有用。我做错了什么？

任何帮助都将不胜感激。

这是一个不起作用的Demo。

Answer 1

在css中提供#searchContainer overflow: visible;，它对我有用。

Bootstrap-Select z-index问题与Accordion

1 个答案: