Chosen: Fix for zero-width problem

Duplicate of #92.

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

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;
  }

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

I just added the following CSS rule:

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

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

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

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.

Thanks @fabioduque It also worked for me!

@pfiller , thank you! that solved my problem.

why does this happen sometimes? :(

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

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' );

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.

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