Senjuti Mahapatra Senjuti Mahapatra - 11 months ago 199
CSS Question

Bootstrap-Select z-index Issue with Accordion

I have implemented

Bootstrap-Select Dropdown
with accordion. Below is the code:


<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>
<div class="col-lg-8"></div>


style: 'btn-primary',
size: 2


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

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

But the
is not coming over the accordion, rather it appears below and the container has to be scrolled to view the contents of the dropdown. I have tried putting the
of the
but it does not work. I have even searched for any resolution of the problem, but none of the answers worked for me. What am I doing wrong?

Any help would be appreciated.

This is a non-working Demo for the same.

Answer Source

give #searchContainer overflow: visible; in the css and it works for me.