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