chosen data-placeholder doesn't display fully for listboxes

Question

I have an asp.net listbox and I'm using the jquery chosen plugin. The data-placeholder value doesn't seem to always work with list boxes. For instance see the image:

Notice the list box for Region it says "Select Re" then it stops...its quite random look at the list box for city that works fine. But look at the list box for country it is supposed to say Select Country... but it shows Select Country.. (missing the last period). My listbox control's asp.net markup is as such:

<asp:ListBox ID="lbRegion" AutoPostBack="true" runat="server" class="chosen-select"
             data-placeholder="Select Region..." SelectionMode="Multiple"
             OnSelectedIndexChanged="lbRegion_OnSelectedIndexChanged" ToolTip="Select Region...">
</asp:ListBox>

I've tried re-creating it, etc...but to no avail. What gives?

Here's my jquery that includes the class for chosen:

$(".chosen-select").chosen({
            search_contains: true,
            no_results_text: "Oops, nothing found!",
            allow_single_deselect: true
        });
        $('.chosen-container').css('width', '200px');

Answer 1

I noticed that each listbox on the page was given the class default. I am not saying this is a definite answer but it is a workaround. Simply add this to your jquery:

$(".default").css("width", "175px");

Use the width to your liking, in this case I used 175px.

Answer 2

Issue about Select Country.. reproduced here: http://jsfiddle.net/D3FUc/, I'll search deeply the reason why of the issue.

The only woraround I found is to override the specific container class like:

li.search-field {
    width: 100%;
}
li.search-field input.default {
    width: auto !important;
}

Issue: https://github.com/harvesthq/chosen/issues/1162#issuecomment-30229366

Demo: http://jsfiddle.net/D3FUc/1/

Answer 3

Setting the width explicitly in the initialization options seems to fix the problem on Irvin's example :

$('.chosen-select').chosen({ width: '200px' });

• documentation
• fiddle (works with FF 26.0)

---

we had done this but using a css style. – JonH

I know.

Somehow, chosen computes a length for the placeholder label, and assigns it in the label's markup, in the style attribute.
I can't tell at what point in the internal rendering this length is computed, but from what the test shows :

• if you only have a css rule, the length is incorrect for the first display,
• if you pass the width as an explicit option, on the other hand, the length is correct.

My blind guess is : the select placeholder's width is read at a point where it has not yet reached its final value - maybe before it was inserted at its final place in the DOM, and hence before the css rule applies.

Answer 4

The css solution changes the appearance of the select box so I didn't want to use it. I managed to work around by calling the following after the chosen is displayed.

//to fix placeholder in chosen
$('select').trigger('chosen:updated')