[SOLVED] Width of Chosen dropdowns near zero when starting in collapsed Bootstrap accordion

Width of Chosen dropdowns near zero when starting in collapsed Bootstrap accordion

When a Chosen dropdown is inside a Bootstrap 3 accordion that's initially hidden, then the width of the dropdown is near zero. After expanding it looks like this:

width zero of select

Whereas I expect it to look like this:

width normal for select

The problem occurs when the panel-collapse collapse div does not have an in class,effectively indicating it's initially collapsed. Here's the code to reproduce this issue:

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

.panel-heading { cursor: pointer; }
body { padding: 10px; }

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

What can I do to prevent this from happening? Calling chosen as .chosen({width: '90%'});, i.e. with a hard-coded width works, but is not satisfactory (I want to style in my stylesheet or using Bootstrap). The only resolution left seems to be to hook into the expanding event and force a chosen update, but that also feels like a workaround.

Preferably I'd have a line of CSS to fix this, or know whether this might even be a bug in the (combination of) tool(s)?

Solution

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.