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)

Members fund testing for the Drupal project. Drupal Association Learn more


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


.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
2.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" ?

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).

jlnd’s picture

Issue summary: View changes

I believe I had this problem and addressed it as follows. (I'm not 100% sure because it was a while back and I might have made this change for some other reason.)

I changed the "Apply Chosen to the following elements" field on the chosen settings page (/admin/config/user-interface/chosen) form the default "select:visible" to "select:not('.tabledrag-hide')".

jlnd’s picture

By the way, for the latest version of the Chosen module (7.x-2.0-beta4) you can make your Chosen fields a little more responsive by doing the following...

Set the "Minimum width of widget" field to a relatively high number. Then add the following CSS to your administration theme:

.chosen-container {
  box-sizing: border-box;
  max-width: 100%;

Note, you may need to make the rule more specific, depending on other style rules applied by your theme (for example, body.adminimal-theme .chosen-container).

donquixote’s picture

Using chosen + vertical tabs in a Bootstrap theme.

For me there does not seem to be a problem with the width.

However, the chosen dropdown is cut off due to overflow: hidden on .tabs-left > .tab-content.

robertstaddon’s picture

To resolve the issue with the Chosen dropdown being cut off inside of vertical tabs in the Bootstrap theme, I overrode the .tabs-left > .tab-content style to trigger Block Formatting Context using a flexbox display instead of with overflow: hidden. This may not work in older versions of IE but it was an acceptable solution in my case.

.tabs-left > .tab-content, .tabs-right > .tab-content {
    overflow: visible;
    display: flex;
.tab-content > .tab-pane {
	width: 100%;
.form-control.chosen-processed {
    padding: 0;
    border: 0;
    height: auto;
    width: 100%; !important;
dbassendine’s picture

Robert: I was having the same problem with Chosen dropdowns at the bottom of a vertical tab fieldset being cut off. Your flexbox CSS approach helped out, many thanks!

acbramley’s picture

Version: 7.x-2.x-dev » 8.x-2.x-dev
30.97 KB

Happens on the D8 version as well. Firstly the width is an issue (removing the width value and letting the module decide causes the select to become a tiny box that can't be interacted with), setting a width fixed that. Secondly the results box is cut off at the edge of the vertical tabs group (see screenshot).

Dropdown cut off

nagy.balint’s picture

Back then we used a forked version of the chosen library to get around that, as it seemed to be a problem with how chosen works in cases like this.

But since then maybe there are css only solutions as well.

Maybe this is related?

kevinquillen’s picture

Priority: Normal » Major
20.62 KB

Bumping this to major.

Firstly, the default setting of "0px" for minimum width doesn't work at all if the field is within a field group (which is probably 98% of use cases from an admin perspective).

If you change the default to 500px, it shows up. But the second problem surfaces - the chosen drop down is cut off by the border of the field group container. Image attached.


kevinquillen’s picture

Actually, this happens to Selectize as well - so this is likely CSS in the Field Group module. .vertical-tabs has overflow hidden set, which causes this.

kevinquillen’s picture

Priority: Major » Normal