Chosen: Default text for multiple select is being truncated

[jacksontong]

I'm using bootstrap and this is my html code:

<div class="form-group">
<select id="copyproposalpageform-proposal_ids" class="chosen" name="CopyProposalPageForm[proposal_ids][]" multiple="multiple" size="4">

</select>
</div>

$('.chosen').chosen({
    width: '100%'
});

The default text is being truncated

but after I clicked to the dropdown and click away, it back to normal

[tjschuck]

What browser, browser version, OS, and OS version are you using? And what version of Chosen? If not the latest version, does it still happen on the latest version?

Additionally, please link to a publicly accessible page (or a Fiddle) that shows the issue so we can attempt to reproduce.

Closing until more info is provided, then we'll reopen.

[tjschuck]

/cc @mlettini

[mlettini]

@tjschuck the width on that <input> is added by JS, I believe. Would also like to see a fiddle of this issue to see if it's something that can be fixed with just CSS or not.

[jacksontong]

Hi @tjschuck

I'm really sorry that I didn't give enough information, I think it happens when jquery chosen is calling inside bootstrap modal. this is my fiddle link.

browser: Chrome 47.0.2526.73 (64-bit)
os: OS X El Capitan

Cheers

[tjschuck]

@tongtoanbs Thanks for following up -- reopened!

[tjschuck]

And cc: @mlettini again — Fiddle provided.

[mlettini]

@tjschuck @tongtoanbs Thanks for the fiddle!

This does indeed look to be a bug, and @tongtoanbs is probably correct that it has something to do with bootstrap. The issue is in JS and not CSS. That input is given a width from the JS, and the width is not long enough when the modal first opens.

• When the modal first opens: http://cl.ly/3n250M0S1H2q
• After clicking into the input and then back out: http://cl.ly/3C2K050F162t

I'm not even sure why we need an explicit width at first. width: 100% _should_ work for the initial multi-chosen (before any options are selected), I think.

[jacksontong]

Hi @mlettini

if I don't pass that option then the chosen dropdown won't showing up for me. fiddle link

[mlettini]

@tongtoanbs I don't think it's anything you're doing. If you look at the input inside of the 0px-width chosen dropdown in your second fiddle, you can still see the bug of the input being 90px when it should be bigger.

[taleteller]

I stumbled on this issue while implementing chosen() on a dynamically created form for my webapp. There the placeholder text was truncated as above. Since there was no progress to this ticket in a whole year, I started to fiddle around for myself.

In Chosen.prototype.set_up_html I changed line 619 from

this.container.html('<ul class="chosen-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>');

to

this.container.html('<ul class="chosen-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:100%;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>');

replacing the initial width from 25px with 100%. Further I removed the call to this.search_field_scale(); in line 627 - which was useless anyway because the same function gets called inside this.results_build();, ran at line 636. However, since my solution is to avoid rescaling the input field during construction, i had to remove this call as well. Therefore removing line 854 from Chosen.prototype.results_build.

While testing the chosen() Field ran perfectly well for me on Firefox and Chrome. Maybe some Dev can do a more extensive testing of this solution to finally solve this ticket.

[jellisii]

I have stumbled upon this issue as well.

https://codepen.io/jellisii/pen/vgQeqz?editors=1111

In this particular instance, you'll notice that I have the width to 100%, which sidesteps the problem of when chosen is rendered while hidden, but still does have the placeholder being short.

[claracena]

Had the same problem after showing the select box (hidden by default). Just run $('.my_select_box').trigger('chosen:updated'); after showing the select box (usually after page load)

[tjschuck]

This was fixed in #2880 and has been released as part of version 1.8.1.