Does jQuery's chosen dropdownlists plugin look weird?

Question

I use the jQuery plugin and I believe that I did everything right, but my asp.net dropdown is so small that I can’t see the results.

First I added a link to the libraries:

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

I have included CSS:

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

Then I applied the class to my dropdown:

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

Finally, in the finished document, I am .chosen() it:

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

Here is the html markup in the browser:

Markup mainly:

 <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's how it looks visually:

I believe that it is applied correctly, since there is css, there are no browser problems in the console (chrome / ff / ie). I can even start typing things and the results are getting smaller, I just don't see the results?

Update

The only thing I noticed is if I have a DropDownList that I don’t have a chosen-select class on it (basically a plain old asp.net dropdownlist) and doesn’t apply to it in the finished document or in the onload window ... if I just applied .chosen() to it during the console, it looks right, for example, here is a simple drop-down list without applying .chosen :

So, this looks right ... if I now go to the console section (google chrome) and just do:

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

It is just directly in the console that I am typing, then it works as shown:

But of course, I still need to do this work without having to go to the console and do it ...

Update 2

I looked at the rendered html and it creates a width: 0px, but I'm not sure where it came 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>

Pay attention to the section

style="width: 0px;"

When I check google chrome it does not reference the .css file ... it just says:

Styles and under this I see:

 element.style { width: 0px; } 

Where could this come from? And how to remove it?

Answer 1

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

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

This removed the CSS style that I described in my original question.

Answer 2

Is your selected control initially hidden (e.g. inside a pop-up conatiner)?

If yes, try using:

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

or some related css fix suggested in the following links; the final correction is not currently being released.

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

Answer 3

TRy using

 $(".chosen-select").chosen({width: 10em;}); 

Maybe the css problem. TRY debugs css styles applied to the final choden div.

Answer 4

I had a problem with width 0 when I used "selected-select" inside the tab. If you go to this tab, add this code.

 $(window).load(function(){ $(".chosen-select").chosen(); }); 

Answer 5

I thought maybe someone might find this useful as we use Chosen in our webforms application.

• You need to set the width when you create the “Selected” checkbox in the drop-down list / list, if the drop-down list / list is not displayed when the page loads. For example, we have pop-up dialogs that do not appear when the page loads. They are displayed when the user presses a button / icon.

• We use EndRequestHandlers in our js to handle postbacks. Sometimes we need to set the width and re-create the selection. Here is an example:

$ (function () {. Sys.WebForms.PageRequestManager.getInstance () add_endRequest (EndRequestHandler);. Sys.WebForms.PageRequestManager.getInstance () add_beginRequest (BeginRequestHandler);

 function BeginRequestHandler(sender, args) { } function EndRequestHandler(sender, args) { if (args.get_error() == undefined) { var postBack = sender._postBackSettings; var postBackClass = postBack.sourceElement.className; if (postBack == null || postBack.sourceElement == null || postBackClass == null || postBackClass == "") { } } $('#filter-container select').chosen({ width: "100px", disable_search_threshold: 10, no_results_text: "Item Not Found" }); } 

});

3. The chosen one is not strong enough to know that it is already being applied from another call in another place. Therefore, remember the selectors that you have chosen to apply the selected plugin to them. Better to be more specific.

Answer 6

If the selected field id is in the popup, try this css. It worked for me.

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

Answer 7

Another option I came across.

 AbstractChosen.prototype.container_width = function () { var getHiddenOffsetWidth = function (el) { // save a reference to a cloned element that can be measured var $hiddenElement = $(el).clone().appendTo('body'); // calculate the width of the clone var width = $hiddenElement.outerWidth(); // remove the clone from the DOM $hiddenElement.remove(); return width; }; if (this.options.width != null) { return this.options.width; } else { return "" + (($(this.form_field).is(":visible")) ? this.form_field.offsetWidth : getHiddenOffsetWidth(this.form_field)) + "px"; } };