Chosen: Placeholder for initially-hidden multiple select is cut off at 90px

Created on 31 Mar 2015 · 7Comments · Source: harvesthq/chosen

When Chosen is initialized on a multiple select inside a hidden container, upon showing the container, the placeholder text is cut off after only 90 pixels:

chosen-multi-cropped

The width option to the Chosen call correctly sizes the entire control, but not the placeholder text/input. After clicking to show the options dropdown, the placeholder expands to the correct size:

chosen-multi-ok

See a minimal jsfiddle (just click the "Show Select" button)

Observed on Chrome Linux, Chrome/Firefox/IE Win.

Sizing

Source

zerocrates

👍1

Most helpful comment

I did $('.chosen-select').trigger("chosen:updated"); when it is shown as work around

akshayvadher on 16 Jan 2017

👍3

All 7 comments

The problem seems to be here:

https://github.com/harvesthq/chosen/blob/master/coffee/chosen.jquery.coffee#L506

For a field that's hidden, .outerWidth() returns a bogus value (n this case, 100, which seems to be coming from the 100% width style set by the width option). Seeing that bogus value, the following lines decide that the input needs to be made smaller to fit (this is why the width ends up as 90px in this example, because the bogus width is 100 and Chosen subtracts 10).

I'm not sure what would be a good fix here, though. The best option I can think of immediately is to set the search input's width to 100% if it's the only thing inside the container, or if the default class is set.

zerocrates on 7 Apr 2015

👍1

I'm facing the same issue here. This issue is present in all 3 browsers installed on my Mac OS X 10.10.3:

Chrome 43.0.2357.65
Safari 8.0.6
FirefoxDeveloperEdition 40.0a2

Thanks!

avinash2 on 25 May 2015

Same issue at #2029

We have used the CSS override in that issue to work around this until this can be fixed.

Gneisler on 14 Oct 2015

Maybe change the search_field_scale function to:
Chosen.prototype.search_field_scale = function () { var div, f_width, h, style, style_block, styles, w, _i, _len; if (this.is_multiple) { h = 0; w = 0; style_block = "position:absolute; left: -1000px; top: -1000px; display:none;"; styles = ['font-size', 'font-style', 'font-weight', 'font-family', 'line-height', 'text-transform', 'letter-spacing']; for (_i = 0, _len = styles.length; _i < _len; _i++) { style = styles[_i]; style_block += style + ":" + this.search_field.css(style) + ";"; } div = $('<div />', { 'style': style_block }); console.log(this.choices_count()); div.text(this.search_field.val() ? this.search_field.val() : this.choices_count() < 1 ? this.default_text : ''); console.log(div.text()); $('body').append(div); w = div.width() + 25; div.remove(); //f_width = this.container.outerWidth(); //if (w < f_width - 10) { // w = f_width - 10; //} return this.search_field.css({ 'width': w + 'px' }); } };