Fix for zero-width problem

[gullbyrd]

I like Chosen, but because I use a lot of ajax and hidden panels, I've been having hellish problems with Chosen rendering the selects with zero width, apparently because the width is being calculated before the select is visible.

I added a line that seems to fix this problem (or provide a workaround), at least in my case.

In the Chosen.prototype.set_up_html function, after "this.f_width = this.form_field_jq.outerWidth();", add:

  if (this.f_width==0) this.f_width = this.form_field_jq.css("width");

Obviously, this only works if the width is explicitly set in css. But in my case, it solves the problem. A better fix would be welcome.

[pfiller]

Duplicate of #92.

[gastonfournier]

I had to make this change on the fix:
if (/px/.test(this.form_field_jq.css("width"))){
this.f_width = this.form_field_jq.css("width").replace("px", "");
} else {
this.f_width = this.form_field_jq.css("width");
}
since this.form_field_jq.css("width"); was returning the width with px at the end

[qinbx]

I have a solution, and this works well in my project:

this.f_width = this.form_field_jq.outerWidth(); // add below code under this line at chosen.jqeury.js

  if (this.f_width==0){ 
      var cloneObj= this.form_field_jq.clone();
      cloneObj.removeAttr('id');
      $(document.body).append(cloneObj);
      var w = cloneObj.width();
      cloneObj.remove();
      this.f_width=w;
  }

[fabioduque]

Hope this helps someone, as it works well in my project.

I just added the following CSS rule:

.chosen-container
{
    width: 100% !important;
}

[nyothecat]

Thanks fabioduque ! Setting css for the chosen-container solved my problem!

[pfiller]

You really don't need to set the width in CSS. You can do it right when you initialize Chosen.

$(".chosen-select").chosen({ width: '100%' }); // any acceptable CSS width will work

[nyothecat]

Actually, I created a KO bindingHandler to generate my chosen elements, and not all of them have a 100% width, so CSS is the way to go for me. Even though I could set the width as an option in my bindingHandler.

[cortopy]

Thanks @fabioduque It also worked for me!

[wilsonsmith]

@pfiller , thank you! that solved my problem.

[verybigelephants]

why does this happen sometimes? :(

[AlissonRS]

I used the css approach, because I didn't want to look all the places I used chosen (and other developers might have the same problem when building new views). So the css fixes the problem globally. Thanks @fabioduque

[tripflex]

I was running into this issue with conditional logic in one of my WordPress plugins ... specifically with the width being set to 0px ... even after init (which I queue chosen fields with chosen:ready so if it's already init and I hide the parent div) ... but anyways, this is what I used to fix this when my jQuery code runs to show the parent DIV element before executing chosen:updated

// This is the original select field
$field = $( '#' + field );

// This is the select field wrapper that I hide (just shown for reference)
$( '.fieldset-' + field ).show();

// Chosen container ID will be original select element ID + _chosen
var $chosen_container = $( '#' + field + '_chosen' );
if( $chosen_container && $chosen_container.width() === 0 ){
    $chosen_container.css( 'width', '100%' );
}

$field.trigger( 'chosen:updated' );

[jjStanley]

If anyone else is still having this issue, check when you are calling $(".chosen-select").chosen(). I had a list of javascript function calls on page load, when I moved the .chosen() call to the top of the list it applied the width properly, no more zero width. The functions that I moved it above were retrieving some data and doing a lot of dom operations.

[ayanctech]

why am i having 2 search icon ,I tried both of the above solutions-