I have integrated jQuery Chosen with a Twitter Bootstrap Accordion. The issue of the Chosen dropdown being clipped by the accordion body has been resolved by referring to solutions provided in this thread. However, I am still encountering another problem where the accordion expands too much in height and then snaps back to the correct height.
To better illustrate the issue, you can view this in action on this jsfiddle link.
Code for Reproducing the Problem
The following code snippet is used to reproduce the height issue within the accordion:
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#body1">First group</a>
</div>
<div class="accordion-body collapse" id="body1">
<div class="box-content">
<span>Body content!</span>
<select multiple="multiple" class="chzn-select">
<option>Option A</option><option>Option B</option><option>Option C</option><option>Option D</option><option>Option E</option><option>Option F</option><option>Option G</option>
</select>
</div>
</div>
</div>
</div>
Chosen dropdown activation is performed using the script below:
$(document).ready(function() {
$('.chzn-select').chosen();
});
The CSS used to mitigate the overflow issue and aid debugging is as follows:
/* Styles for visualizing the problem: */
body, .box-content { padding: 10px; }
.accordion-body { background-color: #EEE; }
.accordion-heading { background-color: #DDD; }
/* Required to make sure the chosen select can expand outside the box: */
.collapse.in { overflow: visible; }
Attempted Solutions
I have tried various approaches to address this issue:
- Exploring different methods to fix the overflow problem. However, it seems that my issue persists regardless of the overflow settings.
- Utilizing a standard select works as a temporary workaround, but not a permanent solution like seen here.
- Applying
height: 0anddisplay: noneon the Chosen select had no impact.
Query
How can I prevent the accordion from expanding excessively in height initially and transition smoothly to the correct size right away?