Problem/Motivation

If you add the element to a form that is being rendered in a modal dialog, the z-index of the dropdown is smaller than that of the dialog overlay, and as a result the user can't reach the dropdown results:

Proposed resolution

Increase the z-index of the whole dropdown container.

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#9 screenshot-select2-in-dialog.png76.89 KBscottsawyer
#5 3012265-5.patch595 bytesmarcoscano
#2 3012265-2.patch398 bytesmarcoscano
options_under_overlay.png34.72 KBmarcoscano

Comments

marcoscano created an issue. See original summary.

marcoscano’s picture

marcoscano
Primary language Portuguese, Brazil
Location Barcelona, Spain
commented
Assigned: marcoscano » Unassigned
Status: Active » Needs review
StatusFileSize
new 3012265-2.patch398 bytes

The overlay seems to have a z-index of 10000. I guess anything above that should do (at least I haven't found any issues with the modif in this patch).

chr.fritsch’s picture

chr.fritsch
he/him
Primary language German
Location 🇩🇪🇪🇺🌍
commented

I didn't looked into it.

Isn't it something that should be fixed with https://select2.org/dropdown#dropdown-placement

chr.fritsch’s picture

chr.fritsch
he/him
Primary language German
Location 🇩🇪🇪🇺🌍
commented

Hi @marcoscano

what about this? https://github.com/thunder/select2/pull/51

Now you could do:

    $form['temporary_maximum_age'] = [
      '#type' => 'select2',
      '#title' => t('Delete temporary files after'),
      '#options' => $period,
      '#select2' => [
        'dropdownParent' => '#drupal-modal', //CSS selector of your modal
      ],
marcoscano’s picture

marcoscano
Primary language Portuguese, Brazil
Location Barcelona, Spain
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3012265-5.patch595 bytes

Works for me!

(uploading the patch here as well so I can more easily target it with composer)

Thanks!

  • chr.fritsch authored de5f840 on 8.x-1.x 
    Issue #3012265 by marcoscano, chr.fritsch: Dropdown is not reachable...
chr.fritsch’s picture

chr.fritsch
he/him
Primary language German
Location 🇩🇪🇪🇺🌍
commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented
StatusFileSize
new screenshot-select2-in-dialog.png76.89 KB

I am having the same issue with 8.x-1.1. I am opening a taxonomy term form in a modal with a link, the term form has a field with a select2 widget. When I open the dialog, the select2-container is lower than the modal dialog, rendering it useless.

select2 renders below dialog

This is not the only place where the taxonomy term form renders, so I don't want to do an alter function to set the dropdownParent, nor do I want to set the z-index in CSS.

Any advice?

dave reid’s picture

dave reid
he/him
Primary language English
Location Nebraska USA
commented

Another issue is that when the select2 JS attach behavior runs, the jQuery dialog is not a selectable element with $('.ui-modal') when trying to use dropdownParent.

jonabh’s picture

jonabh
Primary language English
commented

the issue is still remain within drupal 8.8
I solved it by updating the css with:
.ui-dialog {z-index: 999; }

daletrexel’s picture

daletrexel
Primary language English
Location Minnesota, USA
commented

Just dropping a note here that the fix applied in this issue (patch #5) no longer works. The problem with Select2 in modals has resurfaced, and a new solution is being worked on in #3211796: Issue with z-index when opening in modal dialog. So, if your search for help on this topic lead you here, hop over to this other issue and check out the patch available there.