jQuery's chosen plugin on dropdownlists looks odd?

Question

I'm using the jQuery plugin chosen and I believe I've done everything correctly however my asp.net drop down list's width is so small that I don't see the results.

First I added a reference to the libraries:

<script type="text/javascript" src="Chosen/chosen.jquery.js"></script>

I included the CSS:

<link rel="stylesheet" href="Chosen/chosen.css" />

Then I applied the class to my drop down:

  <asp:DropDownList class="chosen-select" ID="ddlEmps" runat="server" AutoPostBack="True" 
                            ToolTip="Select the employee." 
                            onselectedindexchanged="ddlEmps_SelectedIndexChanged" >

Finally in document ready I .chosen() it:

 $(document).ready(function() {
            $(".chosen-select").chosen();
        });

Here is the html markup in the browser:

The markup is basically:

<select name="ddlEmps" onchange="javascript:setTimeout('__doPostBack(\'ddlEmps\',\'\')', 0)" id="ddlEmps" title="Select the employee." class="chosen-select" style="display: none;">
    <option value="2661">Jon</option>
    <option value="2987">Joe</option>
    <option value="3036">Steve</option>
    <option selected="selected" value="68">Mark</option>
</select>

Here is what it looks like visually:

I believe it is applying chosen correctly as the css is there, there are no browser issues in the console (chrome / ff / ie). I can even start typing things and the results get smaller, I just cant see the results?

Update

The only thing I did notice is if I have a DropDownList that I do not have a class chosen-select on it (basically a plain old asp.net dropdownlist) and not applying chosen to it in document ready or window onload...if I just apply .chosen() to it during the console it appears correctly for instance here's a simple dropdownlist without applying .chosen:

So it looks correct...if I now go to the console section (google chrome) and just do:

$("#ddlEREmployees").chosen();

That is just directly in the console I type that in then it works as shown:

But of course I still need to make this work without having to go to the console and doing this...

Update 2

I looked at the rendered html and it is producing a width:0px but I'm not sure where its coming from:

<div class="chosen-container chosen-container-single" style="width: 0px;" title="Select the employee." id="ddlEtimeEmps_chosen"><a class="chosen-single" tabindex="-1"><span>Jon</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>

Notice the section

style="width: 0px;"

When I check google chrome it doesnt reference a .css file...it just says:

Styles and under that I see:

element.style {
 width: 0px;
}

Where could this be coming from? And how can I remove it?

Answer 1

I had to play with the jquery and remove the style...

$(".chosen-select").chosen(); $('.chosen-container').css('width', '');

This removed the CSS style I described in my initial question.

Answer 2

Is your chosen control initially hidden (example inside a popup conatiner)?

If so try use:

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

or some related css fix suggested in the following links; at the moment no final fix is released.

Github issues: https://github.com/harvesthq/chosen/issues/92 and https://github.com/harvesthq/chosen/issues/795