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]

:+1: :+1: :+1:

[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]

:+1: 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, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

[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?

[sagacity]

A polite bump...is anyone working on this?

[kevinelliott]

Chosen doesn't work for me since it's hiding my select, and then unable to calculate the width. I have to hack it by arbitrarily setting a width on each of the chzn components in CSS. This does not seem like how this is suppose to work, and it really doesn't even look normal like it does on the websites I've seen it on.

[RichardBlair]

I also ran into this problem. As it turns out, the method that chosen uses to get the width of an element is broken in earlier version of jquery (I'm sorry, but I don't have the exact version numbers). As noted above, the bug was when an element is not visible the width would return 0. This bug is very well documented, and there are many ways around it.

The solution for us was to simply upgrade to the newest version of Jquery. Yes, we had to do some patching and testing of old code that used jquery, but in the long run it fixes a lot of issues and reduces the need for little hacks throughout your js/css.

[kevinelliott]

I am installing the latest jquery that is packaged in the rails jquery gem and jquery-ujs. I suppose this is still too old?

[sagacity]

Yes, an actual version number would be nice to have. I can confirm 1.6.2 is too old as well.

On Wed, Nov 16, 2011 at 11:23, Kevin Elliott < reply@reply.github.com

wrote:

I am installing the latest jquery that is packaged in the rails jquery gem and jquery-ujs. I suppose this is still too old?

[stof]

@RoyJacobs newest currently is 1.7 as it has been released.

[RichardBlair]

@RoyJacobs I can confirm that we are using 1.6.4 without issue.

[kevinelliott]

This is strange. Yeah the jquery-rails gem is using jQuery 1.7. But it's still not working for me.

You can see that it is not rendering with a width. Inspection shows all the calculated widths to be 0px. This occurs even if I set .chzn-select to have a width in CSS or directly in the style parameter of the select tag.

https://skitch.com/kevinelliott/gjufg/winetribe https://skitch.com/kevinelliott/gjufp/winetribe

Certainly annoying. The select seems to be getting display:none (I assume from the chosen javascript), and I can only imagine that it's then not able to calculate the width properly.

Thoughts?

[kevinelliott]

I really wish I could get this to work in ANY circumstance (even if I have to force it). Nothing seems to work. I will be forced to abandon this entirely (and I certainly won't want to deal with this broken stuff again).

[KidkArolis]

Make sure your select has some CSS applied, stylesheet or inline. If you do it with stylesheet it means you have to inject the element into the DOM before you call chosen().

But I agree that getting this right is very difficult. I would really like to be able to apply a width to the chosen select via CSS. One class, one width, px or %. My CSS would then look like

.example select, .example .chzn-smth { width: 50%; }

And this would apply the width correctly no matter how or when or where you call chosen.

[kevinelliott]

I have tried it inline and via stylesheet with no change in behavior though.

[cballou]

Pretty substantial problem for lightboxes and accordions. Anybody working on a patch?

[kevinelliott]

I don't think anyone is! I'm shocked because I don't understand how this is usable to anyone. I'm not even artificially hiding my content. The chosen() call seems to be doing it. So strange.

[RichardBlair]

@kevinelliott I think those that were having this issue have either moved on, or found a fix. As I said, in our case it was simply a matter of upgrading jquery. Keep in mind also that we have styled our element to have a width of 224px and we set 'display: none;' directly on the element and not in a style sheet.

I hope this is helpful for you and you are able to get it working.

kevinelliott commented 12 years ago

Thanks Richard. I upgraded my jQuery and that did not help. The strange thing is that I am not hiding my select element. Chosen is hiding it. So I'm not even sure what is happening.

RichardBlair commented 12 years ago

@kevinelliott Np. I am curious, are you setting the width of your

element at all? If so are you using percentage or pixels?

[kevinelliott]

Thanks Richard. I upgraded my jQuery and that did not help. The strange thing is that I am not hiding my select element. Chosen is hiding it. So I'm not even sure what is happening.

[RichardBlair]

@kevinelliott Np. I am curious, are you setting the width of your

[kevinelliott]

I am. I'm setting it with pixels. I have tried setting it on the element directly with the style attribute, and I have also tried it in CSS.

[RichardBlair]

@kevinelliott To be honest I'm at a bit of a loss. The only remaining suggestions I have is 1) wrap the select element in a element (we do this, and our works fine), and 2) stepping through the chosen library to find out at what point chosen is hiding your select element... I also had to do this when we ran into our issues.

Sorry I couldnt be more help.

[tlfbrito]

I have a case, that even with a fixed width in select the chosen create a width: 0px. I can't figured why, doesn't work on this situation, and work in others...

[kevinelliott]

@tiagobrito: I have the exact same problem and have never been able to solve it, fixed or not.

[kevinelliott]

@RichardBlair Thanks for your help. If you think of anything else, let us know :)

[dhampik]

+ same problem, please, fix it

[bewest]

@tiagobrito, @dhampik can you put together a small gist that demonstrates the problem?

[tlfbrito]

@bewest I already figured out! It append when I use jquery 1.4.x in my projects. Next monday I will tell you the correct version of jquery that cause me the width: 0px