Chosen does not get rendered when using toggling visiblity of parent

[dittodhole]

Currently I was using tabs with jQuery, and a chosen-box was placed in a tab.
Unfortunately when the chosen-box, if not placed in the initial visible tab, gets visible (by changing the tab), the width is fukced up.

Therefore I've introduced a new init-parameter (options.width) which could be used eg:

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

The widths of the search-container and search-field get set on-demand (on showing the container)

[illiptic]

Hi,

I merged this locally and the script has a slight error:

When you call the functions set_dropdown_width and set_search_field_width in the "mousedown" function, the functions aren't found.

You're missing a "this."
(tested in firefox only)

Just thought I'd let you know!

Great job otherwise, you saved my day !

[dittodhole]

Hey ... thanks!

I've fixed my code and updated my request! thanks a lot!

[ShaneShipston]

I found providing a width to the original select box fixes the issue

[dittodhole]

Only if you go for a fixed-width aka style="width: 100px;". When you go for a dynamic-width aka style="width: 80%;", you'll need my fix!

[irfandar]

I had the same problem, i fixed it by changing the order of tabs and chosen plugin.

[dittodhole]

@irfandar as mentioned before: the problem is that the width of the box is calculated on init. if the box is not visible at this moment (eg in another tab), the layout gets broken. and no, reordering the ui is not an option! it's not my ui that's broken, it's chosen ... sry

[irfandar]

@dittodhole if you apply chosen before applying jquery tabs it will work fine because if tabs are not applied than select is visible and chosen works properly.
e.g.
$(function(){
$('select').chosen(); // chosen first
$('#container-1').tabs() //than tabs
});

[dittodhole]

@irfandar that's another workaround, but not the real solution. what if the style of your container/style, which gets added after $('#foo').tabs(), resets/changes the outer-width? so, another workaround which is not universal. the real solution might be: decide the width of the chosen-box right at getting visible. otherwise just use the globally accepted solution "width in percentage". everyone, who is used to fluent interfaces, uses percent or em's (or alikes) - so why stay with the absolut-pixels?
it's not that i do not know how to workaround this issue, but for me the most elegant way is to use an optional parameter at initialization...

[stof]

@dittodhole As documented in the readme, you have to implement the same change in the Prototype version, otherwise @pfiller will reject it

[dittodhole]

thanks @stof ... will add a Prototype-translation ...!

[kenearley]

It looks as though this has been fixed by this PR #1141. Closing.

[StevenHB]

Not fixed - still have this issue 2 years later!

[kenearley]

@StevenHB This is free, open source code. Please provide more than just a complaint.

[StevenHB]

Sorry, I noticed this had been closed and the issue is still occurring from the latest build

[kenearley]

There is currently an open issue here. If you can provide more insight on a possible solution, we (and a lot of others) would be grateful.

[StevenHB]

What I have is Chosen within tabs, it chooses to make the container div width to 0.
The fix I had to come up with is :
$('.chosen-select').chosen();
$('.chosen-container').css({"width": "300px"});