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
I encountered exactly the same issue, and what solved this me was adding a
min-width: 220px !important;
to the .chosen-container CSS class :)
Duplicate of #1272 and #1532, possible solution in #1439
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.
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"
});
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.
Most helpful comment
I encountered exactly the same issue, and what solved this me was adding a
min-width: 220px !important;
to the .chosen-container CSS class :)