Within panopoly_core/css/panopoly-jquery-ui-theme.css you will find:

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

I believe that the !important should be removed from this so that other contrib modules can set their own z-index on ui components without adding !important.

This actually causes issues when attempting to set the z-index value higher than 10001. Example is that the TinyMCE external library sets a z-index of 200,000 on #mce_fullscreen_container when going fullscreen. That is great for TinyMCE but when linkit needs to put an overlay (with .ui-front) on top of the crazy high #mce_fullscreen_container the overlay is stuck at 10001 and cannot get a z-index of 210,000.

See related issues for more details.

CommentFileSizeAuthor
#5 panopoly-core-ui-front-z-index-bug-2903756-2-D7.patch281 bytesccjjmartin
#2 wysiwyg-tinymce-fullscreen-2903753-2-D7.patch1.08 KBccjjmartin
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ccjjmartin created an issue. See original summary.

ccjjmartin’s picture

ccjjmartin CreditAttribution: ccjjmartin as a volunteer commented
FileSize
wysiwyg-tinymce-fullscreen-2903753-2-D7.patch1.08 KB
ccjjmartin’s picture

ccjjmartin CreditAttribution: ccjjmartin as a volunteer commented
Related issues: +#2903753: Regression: TinyMCE fullscreen mode, +#2782339: Linkit Button doesn't work with TinyMCE when in full screen
ccjjmartin’s picture

ccjjmartin CreditAttribution: ccjjmartin as a volunteer commented
Status: Active » Needs review
ccjjmartin’s picture

ccjjmartin CreditAttribution: ccjjmartin as a volunteer commented
FileSize
panopoly-core-ui-front-z-index-bug-2903756-2-D7.patch281 bytes
ccjjmartin’s picture

ccjjmartin CreditAttribution: ccjjmartin as a volunteer commented

Previously uploaded the wrong patch please review only that last one.

dsnopek’s picture

dsnopek
he/him
Primary language English
Location USA
CreditAttribution: dsnopek commented

The reason this is there is due to some wacky history with the Media module.

From what I remember, there used to be a parameter to $.dialog() that let you set the z-index for a particular dialog -- this was removed at some point by jQuery UI, and so the Media module added the CSS in the issue summary. We bundle the Media module, and -so that CSS was part of Panopoly. At some point later, the Media module removed the problematic CSS, but then we saw issues where dialogs were appearing under the Media dialog, and so we put that CSS directly into Panopoly as a quick fix (which was acceptable, because we already had that same CSS included from Media for awhile).

If I can find the time, I'll try and dig up the old issues...

andrew_l’s picture

andrew_l CreditAttribution: andrew_l commented

Thank you for posting this. We've had a lot of trouble with a new version of Civi CRM which uses Jquery UI modal windows. These windows were not displaying correctly, and many links/buttons inside the modal windows were not clickable.

We've managed to trace the problem back to this one line in Panopoly's CSS. Removing the !important has fixed the issue and Civi CRM now functions correctly.