The Chosen widget does not appear on select elements inside vertical tabs on node edit forms. The Chosen container (i.e. the .chzn-container div) has a CSS width property of 0 set on it. Unsetting this CSS property makes the Chosen container appear as expected.

Tested with Chose module version 7.x-1.0, Chosen library version 0.9.9, and Fieldgroup module version 7.x-1.1 ( to provide vertical tabs in node edit forms)

Comments

gdl’s picture

Status:Active» Closed (fixed)

Hmm. This particular issue appears to have been resolved in 7.x-1.x-dev, apparently by forcing a minumum width of 200px.

rsvelko’s picture

upgrading to 2.x-dev makes the container min-width: 200px;

but the dropdown box... needs more css

like

.chzn-drop {
min-width: 200px !important;
}

rsvelko’s picture

Title:Chosen widget not visible inside vertical tab» Chosen widget not visible inside vertical tab. Dropdown also.
Status:Closed (fixed)» Needs review

better add that in css and it looks a bit not-polished, than the dropdown not visible at all in vertical tabs...

the best way to do it is to make it fire only under vertical tabs... like:

.vertical-tabs-panes .chzn-drop {
min-width: 200px !important;
}

or sth like that...

mstrelan’s picture

Version:7.x-1.0» 7.x-2.x-dev
StatusFileSize
new2.09 KB

Attached patch adds an option to render chosen at 100% width in vertical tabs, which is consistent with the default styling of textfields in vertical tabs.

See also my patch in #2004342: Chosen form element inside a hidden div receives a width of 0.

GRRaka’s picture

Could not apply patch with git. Applied manually, but still didn't work.

While verifying my changes, I found type error on line 32:
+ if (Drupal.settings.chosen.vertical_tabs_full && $(this).is('.vertical-tabs-pane .chosen-widget')) {
whoudl be
+ if (Drupal.settings.chosen_vertical_tabs_full && $(this).is('.vertical-tabs-pane .chosen-widget')) {

Hydra’s picture

Status:Needs review» Postponed (maintainer needs more info)

I can't confirm this issue. Can you please retry using latest dev version and explain where to find this behavior? This would be great! I believe it must have been fixed with the other changes, but double check would be a good idea here.

ChoY’s picture

Version:7.x-2.x-dev» 7.x-2.0-alpha3

Chosen widget not visible inside vertical tab. - Same issue happens with 7.x.2.0-alpha3
it is probably linked to the new field_group 7.x.1.2. configuration demanding a vertical tabs group container for vertical tabs? For chosen widget not visible inside vertical tab only happens since my fueld_group update I presume there must me a correlation ... but which one?

ChoY’s picture

ps - sorry I forgot to add - it only happens with the country select in addressfield module - not with other select options ...

Hydra’s picture

Status:Postponed (maintainer needs more info)» Active

Ah thats a good information. I will have a look into it later.

aaronbauman’s picture

Version:7.x-2.0-alpha3» 7.x-2.x-dev

Same issue for an entityreference field in a not-visible-when-loaded vertical tab

iMiksu’s picture

I had issue with vertical tabs not working when I updated from 2.0-alpha2 to 2.0-alpha4, but after going through commits, I realized that I had to update the chosen library to 1.0.

After updating that library, my vertical tabs started to work.

So, if you guys don't experience this issue anymore after ensuring that you have right version of the chosen.js library, I guess it's an upgrade path issue then?

JvE’s picture

I am using chosen 7.x-2.0-alpha4+5-dev
I am using chosen library 1.0.0
I am using field_group module 7.x-1.3

If I use "select:visible" then the select elements in the vertical tabs do not get chosen.
If I use "select" then the same select elements do get chosen.

In other places where field_group is not used this problem does not occur.

Therefore I suspect that the field_group module makes the select elements invisible at the time that chosen.js applies it's selector.

What are the disadvantages of using "select" rather than "select:visible" ?

*Update:
Going to "Manage fields" and editing the settings for the vertical tabs field group widget and changing Tab=Closed to Tab=Open also solved the issue without changing anything else (as far as I can tell).