проблемы переходных JQuery UI аккордеон с переливом

Question

Я использую Bootstrap-Select внутри аккордеона Jquery UI, и для того, чтобы работать должным образом, мне нужно содержание гармошкой, как показано ниже:

CSS:

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

Bootstrap-select работает так, как ожидалось, но это приводит к переходу между заголовками. Без перелива CSS, переход работает, как ожидалось, но затем Bootstrap-Select брейки ..

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

Answer 1

Вы может добавить data-container="body" в тег select и удалить переполнение css. Я думаю, что это результат, который вы ищете:

https://jsfiddle.net/hbmjvr7L/