chosen-container getting width: 0px

[gandarez]

I've the latest version of chose (1.0.0) and I'm getting width: 0px within chosen-container. I have no idea why the function this.container_width() has been returning "0px". Someone could help me?

note: I'm using inside a bootstrap modal which shows on the fly
note2: I must call modal() and then call chosen() to not get fail

[paranoidd]

I encountered exactly the same issue, and what solved this me was adding a
min-width: 220px !important;
to the .chosen-container CSS class :)

[koenpunt]

Duplicate of #1272 and #1532, possible solution in #1439

[ChuckNorrison]

I searched for this issue about 1 hour. I wasnt sure if it come since the latest update to 3.2... i fixed it with chosen.css and width: 220px !important

Its not a good solution, it should be fixed with next joomla update... this issue is nearly 1 year old.

[zalza13]

In the code of "chosen.jquery.js" look:

container_props = {
'class': container_classes.join(' '),
'style': "width: " + (this.container_width()) + ";",
'title': this.form_field.title
};

Then simply do:

$("#idControl").chosen({
width: "250px"
});

[chrisjefferies]

I realize this is a bit old, but I've come up with a marginally better solution (for 1.7.0) by adding the following function:

function defModalWidth(obj) {
  if (obj.container_width() == '0px') {
    return '600px';    
  } else {
    return obj.container_width();
  }
}

and replacing this.container_width() in set_up_html by calling it thusly:

this.container.width(defModalWidth(this));

Anything that chosen thinks should be zero because the modal it's in is hidden will get 600 instead.

Seems to work.