Media dialog appears underneath the Ctools modal dialog when using jQuery UI 1.10

Yeah, this is a bit of of a showstopper once you update to jquery_update 2.4 or higher so I'm marking it major.

I can confirm the patch is a working fix.

Thanks @David_Rothstein!

Committed to http://drupalcode.org/project/media.git/commit/4494ac6.

This is not a good fix. Sorry, but that is not stackable. It would fix the current problem with ctools and media, but not if there are dialogs in dialogs in dialogs or something like that.

We need a more generic fix, please.

jQuery UI changelog entry to this topic: http://jqueryui.com/upgrade-guide/1.10/#removed-zindex-option

I have same issue. I wrote my solution here: #2384543: Popup goes below ctools modal
of course it is not good fix also, but for me works better that putting manual z-index value as it creates problems in other cases

This commit broke Media browser on our instances because the z-index is putting the overlay on top of everything preventing interaction with the media browser. As soon as I disable that z-index : 10001 !important; it works again.

I suggest reverting this commit.

Just attaching a patch for drush make purposes that reverts this commit and works on 2.0-alpha4.

Check out the new alpha4. That should solve this problem.

Apply this patch here additionally https://www.drupal.org/node/2316707 and everything should be working fine.

I'm experiencing this issue currently in the 1.x branch, so posting the CSS hacky backport here.

Moving this back 2.x since it hasn't been fully fixed there yet.

Have you tried what I have mentioned in #9?

The 1.x branch doesn't have an alpha4, just 2.x. We haven't upgraded to 2.x because the project page clearly states that 1.x is recommended for production.

We are talking about a 2.x bug here. Not 1.x.
My question was: Is it fixed for the 2.x branch and my instructions from #9?

I'm confused, does reverting the original fix actually resolve the issue as well? Or do we still have a bug that would need to be fixed?

As I have said before: the here suggested patches is only A solution, but neither a good one nor the best.

By "suggested patches" I mean all the patches that are uploaded in this issue.

There should NOT be a bug anymore after doing what I have said in #9

It doesn't seem to me that the original fix that was committed in 7.x-2.x addressed the concern with using Overlay in https://www.drupal.org/node/2272567#comment-9566535. So right now this is currently considering rolling back the original fix.

Oh, yeah. You are right.

I didn't not recognize that the "fix" has actually been committed.

Unfortunately, the fix entirely breaks the CiviCRM UI, which is also defining the .ui-front selector. As a result of the !important property, all CiviCRM dialog modals are now greyed out and inaccessible, due to being "under" the active z-index. (You can see the window, but are unable to click any buttons.)

Some of us first noticed this using Open Atrium and CiviCRM. The recent 2.43 release of OA pulls in this fix and breaks CiviCRM. I'll file a bug with CiviCRM, too. In the meantime, users of both CiviCRM and the media module will likely need to remove this fix in the media/css/media.css file.

From the CiviCRM team, (related issue CRM-16935) looks like this might need to be fixed in media.

CiviCRM does not set the z-index of its dialogs at all. We include the latest version of jQuery UI and use it as-is.
Perhaps [the media team] had good reasons for doing it, but hacking with jQuery UI's css is going to break not only CiviCRM but any other module or theme that uses jQuery UI.

I am wary of playing "arms race" with the media module and trying to make hacks that are even more !important than theirs. jQuery UI's ui-front is a well thought-out but delicately balanced system, and knocking out one pillar from under it seems likely to set off a chain of events that will not end well.

I verified that this is no longer necessary now that #2316707: Drupal.settings.media values become an array of when multiple fields are used is fixed. I manually testing adding media inside of a ctools modal and with the Panels IPE and didn't run into any problems.

Reverted.

Finally! Nice!

thank you, Devin.

I am using media field on form api, panels, panopoly it is still showing media dialog underneath the Ctools modal dialog. I have tested with beta 2 version and dev version both are resulting same. So I need to apply same css again whatever reverted in https://www.drupal.org/node/2272567#comment-10183652.

As #27 states, I can also confirm this is still an issue. I have a media field in a ctools content type edit form which has the dialog appearing underneath the ctools modal.

I am pretty sure this issue is because when a media field is added within an ajax generated form, it doesn't apply the media style settings which are supposed to be added.

I too am having the same issue even with the patch applied from #2316707: Drupal.settings.media values become an array of when multiple fields are used.

Yes, this bug is back. Re-commit the fix? A bit unsure what status is correct for this issue now.

- more specific selector as per #31
- rerolled against head
- tested ok on 7.x-2.0-beta2

I also took the liberty to hide patches from #1 and #8 since this should replace them.

I can confirm that #32 fixes the horrible interaction with CiviCRM alluded to in #21 -

I'm facing the same problem fixed by using patch in comment #32 but when using Wysiwyg + CKEditor in maximized mode, the media popup close button is badly displayed.
So, here is a new patch which includes #32 and fixes close button.

+needs reroll

@PhilY, thanks for a new patch, but it's better to open a new issue for a close button and submit a patch there, rather than mixing it all together here. Besides, your patch has a reference to adminimal theme that not everyone will have. Therefore I'm hiding it.

As for re-roll, I don't think it's needed. Patch from #32 still applies cleanly to the latest head. I'm marking this as "Needs review", although we had a couple of confirmation that #32 fixes the problem - potential candidate for "RTBC".

The patch in #32 works for having media fields in CTools modals, but depending on the theme in use it could be ugly. Unfortunately it's the thing that fixes #21 that makes it ugly: the media dialog is at the top of the stack, but its background overlay is underneath the CTools modal. See this screenshot showing Media 2.0-beta13 plus the patch in use on the latest Panopoly:

This is going to be a problem anywhere there are modal dialogs - or any kind of thing with a z-index - being added by something other than jQuery UI. For example navbar gives its toolbar a z-index of 1002, and admin menu has a z-index of 999.

It might be better to bump up the default z-index for jQuery UI dialogs in .ui-front, and at the same time bump down the z-index for CTools dialogs. If they are all set to the same number, the source code order of the elements will determine the stacking. This will do the right thing in this case because media dialogs are appended after CTools dialogs when you press the Browse button.

CTools sets its z-indexes to 1000 (background overlay) and 1001 (dialog) in the style attribute of the element, which means they can't be overridden by any CSS rules based on selectors. Maybe this needs to be fixed in CTools instead of here.

There is a long-standing issue in CTools to switch to using the jQuery UI modal, see #1397370: Make modal.js use jQuery dialog.

@cboyden , so the related ctools patch works for you in this case?

@joseph.olstad, in my quick test the CTools patch works with a few adjustments. The patch doesn't remove the z-index from the style attribute of the modal div elements, nor does it add the ui-front class. Once I did that, it worked fine. jQuery UI handles the stacking. The only problem was, the CTools modal was positioned in such a way that it was underneath the admin menu provided by navbar. Positioning could be adjusted to fix that, it just needs to be ~20px further down, and be fixed instead of scrolling with the viewport. I'm working on an updated patch.

@cboyden , looking forward to seeing your patch.

Thanks!

Adding the following style to media/css/media.css works for me:

.ui-front {
z-index: 10001 !important;
}

Ctools module setting the dialog z-index to 1000.
jquery ui 1.10 in jquery_update module is setting media dialog z-index to 100.
media module 7.x-2.8 is not setting any z-index.

So we can either ajust the ctools and jquery ui z-index, or add z-index in the media.css file.

Patch 32 should be committed as-is afaik

Ah re-read this thread, seems we were waiting on the ctools related issue mentioned above.

It would be nice if we could get some reviews for the ctools issue and rtbc the ctools related issue if possible get that in

review #46

actually I should have creditted @khaldoon_masud for #46

yes more specific targetting is safer thanks again!
should be good now.