Chosen widget not visible inside vertical tab. Dropdown also.

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;
}

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

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.

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')) {

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.

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?

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

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

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

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?

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

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

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

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.

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;
}

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!

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

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? https://github.com/harvesthq/chosen/issues/86

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.

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.

Note I had to add the following fudge in addition to the code at comment #16 to display the field

.fieldset-wrapper .chosen-container.chosen-enable {
    min-width:50%;
}

In Drupal 8, on a Bootstrap theme, select fields in the first vertical tab work fine, but for fields in other tabs, Chosen has no effect at all. They just display as normal multiselect fields.

None of the CSS in comments here makes any difference.

update: my mistake, the node form is displayed in Seven (admin theme).

Ah, I think I misunderstood this issue. This is about no widget appearing at all, yes? I think I'm seeing a different problem, I'll open a new issue.

In D8.7 I had a similar problem on second vertical tab, chosen select lists are very small and do not work.

Went to "/admin/config/user-interface/chosen" and set "Minimum width of widget" to 400.

Problem fixed.

Should be noted that the chosen select lists in the first vertical tab were multi-value and the ones in the second vertical tab (which had the problem) were single value.

Here's a re-rolled version of the patch from comment 4. Unfortunately that's only for D7, sorry!

Sorry - that re-roll didn't account for a couple of upstream changes - this reroll actually works!

@james.williams Composer couldn't apply #28 to 2.8 or 2.x-dev.

After reading the comments, I quickly got this working without a patch (using Drupal 8.7.9 and Chosen 2.8).

Based on the suggestion at #12, I added an additional element to select:visible so now it's select:visible, .vertical-tabs select. This leaves the default configuration alone, while targeting only hidden select elements in closed vertical tabs. Problem solved.

This does not only affect vertical tabs, all tabs are affected by this bug.

I suggest something like this as workaround:
select:visible, .field-group-tabs-wrapper select

And as @yanivs said: "Minimum width of widget set to 400px"

We ran into this same issue when including a chosen widget within a horizontal tab. Here is the patch we have created for 8.x-2.9 tag. The patch is set to work with vertical tabs as well as horizontal.

It's broken for us in "closed" horizontal tabs (i.e. the ones that aren't visible on page load).

In our case, setting a minimum width fixed the issue, no need to add a field group class to the selector configuration (I left it as select:visible) -- I feel like that means this issue is indeed a bug, right? From what I can see, chosen library is getting loaded AND applied, but the width is wonky if the field is inside a non-visible field group on page load. Or is what I'm describing totally different from what everyone else is experiencing?

(All I mean is, if we just needed to add a selector for these situations, I could see relegating this issue to "documentation", because, having to customize the selectors is a normal part of using the module. I hope I'm making some sense :) )

EDIT: Just kidding!! I forgot that on this particular field, "Chosen" was selected as the field widget on "manage form display," that's why it didn't need the field group selector in the Chosen module settings to be activated #facepalm

So, back to what others have said:

• Adding a selector for my field group does work to activate chosen (arguably not a bug -- I'm fine either way, but I can understand not considering it a bug -- especially since you CAN activate chosen on these fields via manage form display); AND,
• I have to set a minimum width in order for Chosen to be functional on fields that are not visible on page load (totes a bug, IMO).

----
Drupal 8.9.1
Chosen module v2.9
Chosen library v1.8.7
Field group v3.1

I have checked #31 patch, but it wasn't working for me. I'm using the field_group module to create tabs. I also use the "adminimal" theme. I checked chosen JS library issues and found this one - https://stackoverflow.com/a/62076652/3455322. Instead of setting 100%, we should set the width option as an empty string.

I also noticed that elements with class "horizontal-tabs-panes" or "vertical-tabs-panes" don't exist. The classy theme adds in vertical_tab theme "data-vertical-tabs-panes" attribute, so I also changed it.

Fixing those two issues allowed me to use chosen fields without any problems. Please review the uploaded patch.

I successfully installed patch #33 on top of Chosen 3.0.1, and it managed to resolve the issue successfully for me.

Thanks!!

Patch #33 works, but I had to put options.width = '400'; to work nicely for me.

My config: D9.1.0, Chosen 3.0.1

However, at the end I decided not to apply patches from here and to give a chance to Asset Injector module and it works like a charm!

I have added a few lines of css to my admin theme (Seven) CSS injector:

.field--name-field-seminar .chosen-container.chosen-enable,
.field--name-field-event .chosen-container.chosen-enable {
  min-width: 400px;
}

Once this issue is fixed and committed I will delete these few lines from CSS injector. Simple enough. :)

I was testing this patch for an unrelated width issue (details html tag), but I noticed it messed with my chosen elements even though I don't have horizontal or vertical tabs. The check on the parents elements always results in true. Updated the check.

Just to confirm that the patch in #36 also worked for me for making chosen fields have a sensible width again in the Seven admin theme, although I also had to change the one line to

options.width = '400';

as suggested in #35.

Thanks!