Search code examples
cssjquery-uiaccordionjquery-ui-accordionbootstrap-select

JQuery UI Accordion transition issues with overflow

I am using Bootstrap-Select inside a jQuery UI accordion, and in order for it to work properly, I need to style accordion's content as follows:

CSS:

.ui-accordion-content {
  overflow: visible !important;
}

The Bootstrap-select works as expected, but it causes the transition between headers to mess up. Without the overflow css, the transition works as expected, but then the Bootstrap-Select breaks.. enter image description here

HTML:

<div id="accordion">
  <h3>Header Two (Bootstrap-Select)</h3>
  <div>
    <select class="selectpicker form-control" data-live-search="true">
      <option>Select 1, Option 1</option>
      <option>Select 1, Option 2</option>
      <option>Select 1, Option 3</option>
      <option>Select 1, Option 4</option>
      <option>Select 1, Option 5</option>
    </select>
  </div>
</div>

JS:

$("#accordion").accordion({
  heightStyle: "content"
});

JSFiddle Demo

Solution

  • You can add data-container="body" to the select tag and remove the css overflow. I think this is the result you are looking:

    https://jsfiddle.net/hbmjvr7L/