Width of Chosen dropdowns near zero when starting in collapsed Bootstrap accordion
Reason:
Chosen calculates and assigns the width when the DOM is ready, before that the initial width for the emulated drop-down is zero.
Solution:
Add the following to your CSS so the dropdown has an initial width:
.chosen-container.chosen-container-single {
width: 300px !important; /* or any value that fits your needs */
}
The !important part is because chosen adds an inline style of width: 0; to the element itself and you need to override the specificity with !important.
From jquery-chosen official documentation:
The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.
So you need to specify width attribute
$(document).ready(function() {
$('select').chosen( { width: '100%' } );
});.panel-heading { cursor: pointer; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Expand me to show the issue!
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body form-inline">
<p>This select has a near-width zero:</p>
<select class="form-control">
<option>Short</option>
<option>Longer option</option>
<option>The longest option of them all</option>
</select>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title">
Already expanded / how it <em>should</em> be
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body form-inline">
<p>This panel is initially visible and <em>does</em> have correct width for the select box:</p>
<select class="form-control">
<option>Short</option>
<option>Longer option</option>
<option>The longest option of them all</option>
</select>
</div>
</div>
</div>
</div>EDIT:
Also as a hack you can check visible selectbox width and apply it to all others:
$(document).ready(function() {
$('select').chosen( { width: $( '.panel-collapse.collapse.in select' ).eq( 0 ).width() + 'px' } );
});
It works if you do
$('.my-element').chosen({width:"auto"});