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

Question

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:

Whereas I expect it to look like this:

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:

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

Answer 1

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.