if select is initially hidden, doesn't work

[iamnader]

This is because when setting the width it will return 0. Using this technique works: http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/

The code should check if the elmt.is(:visible) and if so use the above technique. I'm happy to fix in a fork. @hat is the procedure? Just patch the coffeescript? How do you generate js and js min?

[reconbot]

Yes you should patch the coffee script. Also I'm for the ability to setup hidden elements.

[obie]

+1 ran into this issue today

[techpeace]

+1 as did I

As a workaround, you can set the width of the created div with an !important flag:

#my_select_chzn {
  width: 100% !important;
}

[techpeace]

Actually, this will get you closer to where you need to be. The widths aren't perfect, but everything will be visible.

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

[pfiller]

An earlier version of Chosen actually tested to see if the form field width was set via css. If so, it didn't use the width calculation. I think I prefer this method of fix to adding 30 lines of code for testing hidden elements. Would something like this work for you?

Set the width:

  <select style="width:350px;" class="chzn-select">

JS tests for set width first:

  @f_width = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

[aziz]

@pfiller there's a small bug in your code. If the inline style has a width in any unit other than pixels (like em) the code will interprete it as pixels. see line 56 in chosen.jquery.coffee

I think people will continuously complain about it and you'll ultimately need to add that 30 lines of code.

[iamnader]

Hi @pfiller, that doesn't work. Both width() and css("width") return 0 for hidden elements. I'm using the getHiddenDimensions technique and it's working well.

btw, you need to use it both for f_width and also in get_side_border_padding

[enhughesiasm]

+1 for this.

A lot of the logic on the site I'm integrating Chosen on relies on some selects being hidden on first load, so we get all kinds of problems with this.

[v15h]

+1 as well. Visibility checks should be built in.

[aziz]

👍 👍 👍

[AndrewRayCode]

What about the solution where the dropdown width isn't set permanently on first startup, and is just resized to the width of the textbox when it opens? That way you don't have to ever touch the width of the input, just assume it's set with css and read it every time you open the dropdown.

[johndwells]

+1 for this. I've decided to turn Chosen into a fieldtype for the ExpressionEngine CMS, but the publish layouts of EE allows for fields to be hidden on page load.

I'm not sure if this is related, but in the case of EE it would be best if the width were fluid, or simply was always 100% of its containing element...

[vespakoen]

http://www.alistapart.com/articles/now-you-see-me/

[AlexMC]

Bumped into this one... it's still happening in the latest version

[joesondow]

+1
This bug is blocking usage of the Chosen plugin for internal apps at Netflix

[DarkPreacher]

👍 on this issue, ran into this problem today

[vespakoen]

You can hide your content with: position: absolute; left: -999em;
This way, screen readers and Google can "read" them too, and your Chosen dropdown WILL be visible when showing it again.

[AndrewRayCode]

My pull request fixes this issue, but like my other one and many of the ones for chosen they are being ignored. This project has too many contributors with too small of a code base.

[bewest]

DelvarWorld, thanks for your patch. This has been bugging me, and I was just about to implement a similar solution and thought I'd double check to see if anyone had already done so.

I'll be deploying this to production code shortly after I test it.

[pfiller]

@delvarworld what pull request are you referring to? I see one open pull request from you and it does not address this issue.

[AndrewRayCode]

@pfiller The one listed above in this thread, AndrewRayCode@e950156

[bewest]

More important than using the css is using the "current" width of the element when rendering the results, instead of using an incorrectly cached width from the construction of Chosen.

There have been many changes, and I'm not quite sure of the best way to merge them myself. Will you have a merged version shortly?

[AndrewRayCode]

@bewest my pull request does that, every time the dropdown is shown it matches the width of the element

[bewest]

@delvarworld I know, just making sure the right distinction is made.

Can you try bringing your auto-width branch up to date with HEAD? I tried merging from a similar checkout around the end of August, but the input box is now the wrong width (it is too wide, overflowing the width of chosen's container).

I'm taking a look, but there's also been some re-organization... the constructor has been removed in favor of a setup and finish_setup methods. I'm also not familiar with coffeescript so your progress in merging might be faster than mine and submitting a pull request my help, since there seems to be a lot of interest in this issue.

[AndrewRayCode]

Actually, my branch has diverged past just that change, and eventually I gave up working on the prototype version. My fault, and I think at this point it's not mergeable.

[bewest]

@DevarWorld Yeah, it needs to be reworked a bit so that some bits go in the Abstract implementation. This should make it easier to maintain the differences between prototype and jquery.

Would you be willing to give it another go?

[fsparv]

What an epic 5 year bug... and still biting people (ouch!).

[LukeMcLachlan]

Google has a similar bug with their map that doesn't display properly in a hidden div. however both these problems have workarounds that are simple to implement.

[fsparv]

Yes, I hit that google maps bug some time last year IIRC, but how many folks spent half a day cursing and trying various things before finding this report? Bugs like these in popular libraries waste hours of time. Multiplied across the number of folks learning either of these libraries each year the aggregate costs are probably staggering... If they aren't going to fix it, that's ok. Fixing it at this point might interact strangely with vast numbers of deployed workarounds perhaps... In that case they should admit they aren't fixing it and document the workaround somewhere prominent in the documentation so that folks don't struggle to make (or miss) deadlines over this stuff.

[brianjcohen]

My "overall" fix is similar to others, and it assumes that all my selects' widths in the markup are 100% of their parent div. We use bootstrap so this is the case for us.

Run this code just after you initialize .chosen() at page load.

$(".chosen-container").each(function(i, elem) {
	if ($(elem).width() == 0) {
		$(elem).width("100%");
	}
});

[geordi-la-forge]

To those of you that had a problem where if the element was initially inside a css hidden container, and then when made visible had a width of 0px - the fix I found was to set the width in js config;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

Then I gave the select inputs the css class chosen-select-width

<select name="f01" class="chosen-select-width" id="item_select_staff">

Seemed to do the trick with chosen v1.6.2 and jquery version 3.1.1.

[KZeni]

I just leave the default chosen width option (auto) and add

.chosen-container { min-width:5em; }

to my site's CSS (adjusting the min-width as needed). This makes it never become 0px (or just too small to use) while still fitting the select's ideal width when possible (forcing a 100% width or something to that effect doesn't work well when you have select elements inline with other content & this method addresses the core issue as well as allowing for inline select elements & seemingly offering the simplest & most straightforward implementation).

[bhartvigsen]

How is this still broken after SEVEN years?

[koenvanderlinden]

My workarond with bootstrap 3 is adding the following style:

.chosen-container {
    min-width: 90%;
}

[sharifanani]

My workarond with bootstrap 3 is adding the following style:

.chosen-container {
    min-width: 90%;
}

Buy then the dropdown still doesn't show.... @koenvanderlinden

[qbadev]

it is already documented
https://harvesthq.github.io/chosen/options.html
Check the width option and its description

[KZeni]

@qbadev Although this makes it so the element doesn't size to fit the content when needed so I don't really see that as a fix (especially when using min-width provides a better result than this).

The documentation's description effectively just calls out the bug (which should be possible to resolve) and mentions using that as a potential workaround for the bug.

@koenvanderlinden recommends min-width:90%; so it's normally 90% width with it going up to 100% width if the contents of the select necessitate it. Then again, I still opt for min-width:5em; (exact em value varying depending on the use case) so it's never too small, but it still tries to expand to fit the content of the select rather than sizing based on the parent element.

[qbadev]

@KZeni I didn't say it's a fix. It's just documented. And it is a fine solution. My main issue was that Chosen was almost 0 width after init. Now, after "fix", I can see chosen and can do with it whatever I want using CSS classes applied to parent element.

I faced such problems many times before, that couldn't be calculated because object was 0 width. It can't be resolved in a universal way, as each application differs.
So when ones select is visible in a moment of init, no action is needed, but if it's hidden, using width option is a way to be used.

[odelgadillo]

Custom Width Support
Using a custom width with Chosen is as easy as passing an option when you create Chosen:
$(".chosen-select").chosen({width: "95%"});

https://harvesthq.github.io/chosen/

[dmitryvhf]

I found this problem after jQuery upgrade from 1.* to 3.* release.
Solved that:

chosen.jquery.js:543
AbstractChosen.prototype.container_width = function () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";