Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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)
Comment | File | Size | Author |
---|---|---|---|
#36 | chosen-horiz-tab-1857298.patch | 547 bytes | ducktape |
| |||
#33 | chosen-horiz-tab-1857298-33.patch | 525 bytes | Marcin Maruszewski |
#31 | chosen-horiz-tab-1857298-31.patch | 537 bytes | gmercer |
#28 | chosen-full-width-inside-tab-1857298-28.patch | 2.59 KB | james.williams |
#20 | Screen Shot 2018-02-14 at 3.10.27 PM.png | 20.62 KB | kevinquillen |
Comments
Comment #1
gdl CreditAttribution: gdl commentedHmm. This particular issue appears to have been resolved in 7.x-1.x-dev, apparently by forcing a minumum width of 200px.
Comment #2
rsvelko CreditAttribution: rsvelko commentedupgrading to 2.x-dev makes the container min-width: 200px;
but the dropdown box... needs more css
like
.chzn-drop {
min-width: 200px !important;
}
Comment #3
rsvelko CreditAttribution: rsvelko commentedbetter 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...
Comment #4
mstrelan CreditAttribution: mstrelan commentedAttached 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.
Comment #5
GRRaka CreditAttribution: GRRaka commentedCould 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')) {
Comment #6
Hydra CreditAttribution: Hydra commentedI 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.
Comment #7
ChoY CreditAttribution: ChoY commentedChosen 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?
Comment #8
ChoY CreditAttribution: ChoY commentedps - sorry I forgot to add - it only happens with the country select in addressfield module - not with other select options ...
Comment #9
Hydra CreditAttribution: Hydra commentedAh thats a good information. I will have a look into it later.
Comment #10
AaronBaumanSame issue for an entityreference field in a not-visible-when-loaded vertical tab
Comment #11
iMiksuI 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?
Comment #12
JvE CreditAttribution: JvE commentedI 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).
Comment #13
jlnd CreditAttribution: jlnd as a volunteer commentedI 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')".
Comment #14
jlnd CreditAttribution: jlnd as a volunteer commentedBy 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:
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
).Comment #15
donquixote CreditAttribution: donquixote as a volunteer commentedUsing 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
.Comment #16
robertstaddon CreditAttribution: robertstaddon commentedTo 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 withoverflow: hidden
. This may not work in older versions of IE but it was an acceptable solution in my case.Comment #17
dbassendine CreditAttribution: dbassendine commentedRobert: 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!
Comment #18
acbramley CreditAttribution: acbramley commentedHappens 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).
Comment #19
nagy.balint CreditAttribution: nagy.balint at Agence Inovae commentedBack 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
Comment #20
kevinquillen CreditAttribution: kevinquillen at Velir commentedBumping 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.
Comment #21
kevinquillen CreditAttribution: kevinquillen at Velir commentedActually, 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.Comment #22
kevinquillen CreditAttribution: kevinquillen at Velir commentedComment #23
robcarrNote I had to add the following fudge in addition to the code at comment #16 to display the field
Comment #24
brad.bulger CreditAttribution: brad.bulger commentedIn 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).
Comment #25
brad.bulger CreditAttribution: brad.bulger commentedAh, 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.
Comment #26
Yanivs CreditAttribution: Yanivs as a volunteer commentedIn 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.
Comment #27
james.williams CreditAttribution: james.williams at ComputerMinds commentedHere's a re-rolled version of the patch from comment 4. Unfortunately that's only for D7, sorry!
Comment #28
james.williams CreditAttribution: james.williams at ComputerMinds commentedSorry - that re-roll didn't account for a couple of upstream changes - this reroll actually works!
Comment #29
markdc@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'sselect:visible, .vertical-tabs select
. This leaves the default configuration alone, while targeting only hidden select elements in closed vertical tabs. Problem solved.Comment #30
Damien Laguerre CreditAttribution: Damien Laguerre commentedThis 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"
Comment #31
gmercer CreditAttribution: gmercer commentedWe 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.
Comment #32
alisonIt'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:
----
Drupal 8.9.1
Chosen module v2.9
Chosen library v1.8.7
Field group v3.1
Comment #33
Marcin Maruszewski CreditAttribution: Marcin Maruszewski at RatioWeb commentedI 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.
Comment #34
PhilippVerpoortI successfully installed patch #33 on top of Chosen 3.0.1, and it managed to resolve the issue successfully for me.
Thanks!!
Comment #35
devad CreditAttribution: devad as a volunteer commentedPatch #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:
Once this issue is fixed and committed I will delete these few lines from CSS injector. Simple enough. :)
Comment #36
ducktape CreditAttribution: ducktape at Dropsolid commentedI 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.
Comment #37
PhilippVerpoortJust 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!