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.
Problem/Motivation
In case you are using select2 widget in a dialog/modal, autocomplete results are not visible due to not having z-index value.
My steps to reproduce:
- Install Paragraphs Demo and Enable Paragraphs Library and Select2 modules
- Enable Entity Browser and configure it as a widget for Paragraphs Library (from_library) paragraphs type
- Create a new paragraph type and add an entity reference field
- Configure select2 widget for the entity reference field
- Go to admin/content/paragraphs and create a new library paragraph with your paragraph type
- Go to node add page and find a library item
- Edit the library item in the dialog and try to search for new references.
Proposed resolution
We should add z-index: 1260
; property on .select2-container
CSS class since Core uses z-index: 1259
on .ui-dialog
.
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
Comment | File | Size | Author |
---|---|---|---|
#12 | select2-in-dialog-fix-3114589-12.patch | 9.6 KB | aludescher |
#12 | select2_uiwidget.png | 99.41 KB | aludescher |
#7 | select2-in-dialog-fix-3114589-7.patch | 451 bytes | mrinalini9 |
#2 | 3114589-select2-in-dialog-fix.patch | 451 bytes | sasanikolic |
#2 | Select2 in modal.png | 770.11 KB | sasanikolic |
Comments
Comment #2
sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commentedHere is the patch with the proposed fix and the screenshot of how that looks. Note that we need a more specific selector than just
.select2-container--seven
as in that case the select2 will overlap the modal itself.Comment #3
mbovan CreditAttribution: mbovan at MD Systems GmbH commentedTested with Seven and Claro themes.
It works well with the Seven theme, but the same problem still appears with Claro theme.
I think we should have a fix for Claro too.
Comment #4
sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commentedSeems like select2 supports only seven theme. There are only select2.seven.css and select2.seven-overrides.css in the module which get loaded only for the seven theme. Also, all selectors are explicitly set to .select2-container--seven.
There is a separate issue for Claro integration: https://www.drupal.org/project/select2/issues/3100219. I think all custom css styles will be ported there.
Comment #5
mbovan CreditAttribution: mbovan at MD Systems GmbH commentedI commented in #3100219: Add a claro theme to connect these two issues.
That said (#4), this should be ready IMHO.
Comment #6
BerdirLooks like this needs a reroll.
Comment #7
mrinalini9 CreditAttribution: mrinalini9 at Srijan | A Material+ Company for Drupal India Association commentedRerolled patch for 8.x-1.x, please review.
Comment #8
chr.fritschTrigger the tests https://github.com/thunder/select2/pull/95
Comment #10
chr.fritschDone, thank you
Comment #12
aludescher CreditAttribution: aludescher at drunomics commentedThe issue is still there with latest dev.
Some issues I came accross:
.ui-widget-overlay ~ & { z-index: 1260; }
is not enough. We could use '.ui-dialog ~ &' instead.It's not clear to me why only the seven, claro and gin themes should contain this fix? Can't we add it to a generic css file and override it with a theme specific one when it's the case?
In addition to the above the attached patch also removes duplicate code from select2.seven.scss:
Comment #13
BerdirI would strongly suggest that you create a new issue. I only saw it due to a mail notification, it will almost certainly get overlooked in here.
Comment #14
aludescher CreditAttribution: aludescher at drunomics commentedThanks @Berdir, issue created: https://www.drupal.org/project/select2/issues/3258855