Select in a div that's hidden on page load

[MK-Chris]

Hi

I seem to have hit an issue using Chosen to generate a select list in a div element that's hidden on page load. If the div is then shown, the select list has no width and you can't see any item text. You should be able to see what I mean with the below JSFiddle:

http://jsfiddle.net/mamwuen5/

If the div is not hidden on page load, you can hide and show it to your heart's content, as in the below JSFiddle:

http://jsfiddle.net/mamwuen5/2/

Am I doing something wrong, or is this a bug?

Thanks

Chris

[briannesbitt]

For what its worth I just came across this having a chosen select in a bootstrap modal.

Fixed it by using $("select").chosen({width: "100%"}); option.

[MK-Chris]

Thank you - I was hoping to have it use the width specified in the CSS, which is why it wasn't specified (as I have selects of differing sizes sometimes), but I can try and work around that.

[Salik-Rafiq]

This is probably the most annoying "feature" of this control. I tried Select2 and it doesn't have this limitation.

What I did was something akin to
$('.droplist').each(function(){
var css_width = $(this).css("width");
$(this).chosen({width: css_width});
}

which works okay for me.

[alar1]

this whorks for me:
$(".chosen-select").chosen('destroy');
$(".chosen-select").chosen({width: "100%"});

[pfiller]

Duplicate of #92