Jeroen Jeroen - 2 months ago 9
jQuery Question

Accordion with jQuery "Chosen" select: height becomes too large before snapping back

I'm using jQuery Chosen inside a Twitter Bootstrap Accordion. I've solved the issue of the Chosen dropdown being clipped by the accordion body using answers to this question. This still leaves me with one other issue: the accordion will slide down and grow in height, but it'll grow too much and after that snap back to the appropriate height.

This jsfiddle demonstrates the issue. Here's an illustration of the problem:

Screenshots of stage collapsed, expanding, and expanded

.

Code to reproduce the issue



To reproduce this issue I've used the following code:

<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>


Activating the chosen dropdown with this code:

$(document).ready(function() {
$('.chzn-select').chosen();
});


And using this CSS for fixing mentioned overflow issue as well as some debugging aid:

/* 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; }


.

Things I've tried:



There are several things I've tried to resolve this:



.

Question



How can you prevent the accordion to grow too much height in the first place, and make it grow to the correct size straight away?

Answer

It can be done with little bit of js, see this fiddle. The relevant code:

$(document).ready(function() {
    $('.chzn-select').chosen();

    $(".box-content") .hover(function(){
        $(".chzn-container .chzn-drop") .css({"display":"block"});
    },function(){
        $(".chzn-container .chzn-drop") .css({"display":"none"});
    });    
});

Alternatively but along the same lines, you can use the following CSS to fix the problem:

.accordion-body .chzn-container .chzn-drop { display: none; }
.accordion-body[style="height: auto;"] .chzn-container .chzn-drop { display: block; }

See this fiddle for a demo.

Comments