Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

chosen data-placeholder doesn't display fully for listboxes

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:

enter image description here

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');
like image 505
JonH Avatar asked Jan 15 '14 18:01

JonH


1 Answers

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/

like image 96
Irvin Dominin Avatar answered Oct 06 '22 19:10

Irvin Dominin