z-index problems with ERL modal when added/edited paragraph opens entity browser in modal [#3038537]

Problem/Motivation

Currently the ERL modal for a specific added/edited paragraph is added/displayed in a way that it overlays all other elements. This is a problem if you add a paragraph, that itself opens an entity browser in a modal. Currently the entity browser is opened behind the ERL modal and thus not clickable / entities are not selectable.

Proposed resolution

Check and rework z-index of ERL modal so it does not overlay other elements

Remaining tasks

Provide a patch

User interface changes

n/a

API changes

n/a

Data model changes

n/a

Release notes snippet

Comment	File	Size	Author
#10	entity_reference_layout-z-index-problems_3038537-10.patch	15.45 KB	justin2pin
#10
#9	entity_reference_layout-z-index-problems_3038537-9.patch	15.43 KB	justin2pin
#9
#7	entity_reference_layout-z-index-problems_3038537-7.patch	15.43 KB	justin2pin
#7

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

8 March 2019 at 12:11

hctom created an issue. See original summary.

Comment #2

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 8 March 2019 at 13:09

Can you provide more details about the specific modules and configuration you are using? Currently z-index for modal elements are 1001, 1002, and 1003, and are not overlaying other elements (including media browsers) for my particular configuration. Thanks.

Comment #3

hctom

German

CreditAttribution: hctom at undpaul commented 8 March 2019 at 14:21

I am using the following modules:

entity_browser: 8.x-2.1
entity_browser_enhanced: 8.x-1.0-rc3
paragraphs: 8.x-1.6
paragraphs_features: 8.x-1.4

My custom "Video" paragraph for example uses an entity browser for the media entity reference widget. This one opens a custom entity browser with a view widget listing all video media entities.

Seven is used as admin theme for all of this.

If you can't reproduce this issue, I will just add something to my CSS forcing the entity browsers to have a z-index higher than 103.

Strange thing I just realized, don't know if that helps or confuses even more: Currently I have the "Paragraphs with layout" field added additionally to my "normal" paragraphs field for content items to review its functionality. When I hide the normal paragraphs field in the form, the entity browser is opened behind (with z-index of 101) the ERL modal. When I display the normal paragraphs field as well, the entity browser modal is opened with a z-index of 1260 - but only if I already added a video paragraph there that previews the video with the blazy video formatter.

Comment #4

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 9 March 2019 at 04:33

Weird. Can you scan your files for where z-index is being set? I'm not seeing that in any of the modules you listed. I'm guessing another contrib module is overriding the z-index specifically to prevent this from happening in a different context. Let me know if you find where that is being set.

Comment #5

hctom

German

CreditAttribution: hctom at undpaul commented 11 March 2019 at 07:43

I just scanned all the contrib files, but none of them is setting the z-index of the jQuery UI modal dialog. The only thing I found is the following in jQuery UI itself:

https://github.com/jquery/jquery-ui/blob/master/ui/widgets/dialog.js#L245

In this function the z-index of the modal is determined automatically by other potentially .ui-front:visible elements (which start with a z-index of 100 - see https://github.com/jquery/jquery-ui/blob/74f8a0ac952f6f45f773312292baef1...). The _moveToTop() is also called every time a UI dialog opens, so I guess it does not take the Graphene modal into account - was there a special reason you implemented this dialog JS instead of using the built-in jQuery UI dialog?

I also checked your code and mentioned that you changed the modal's z-index with values greater than 1000 (while the Graphene modal originally uses z-index >= 1 for its elements) with the "Reduced z-index to not conflict with core ui modal." commit. Perhaps that is the cause for these problems, as the jQuery UI dialog does not scan for other things having higher z-indexes.

So I guess, instead of introducing a new modal library, the built-in jQuery UI modal should be used within this module to get rid of these layering problems.

What do you think?

Comment #6

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 12 March 2019 at 03:38

Thanks - agreed, using jQuery UI modal would be better. Will work on a patch. Cheers.

Comment #7

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 13 March 2019 at 20:18

File	Size
entity_reference_layout-z-index-problems_3038537-7.patch	15.43 KB

This patch replaces the Graphene modal with jQuery UI dialog.

Comment #8

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 13 March 2019 at 20:18

Status:

Active

» Needs review

Comment #9

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 13 March 2019 at 21:09

File	Size
entity_reference_layout-z-index-problems_3038537-9.patch	15.43 KB

Changed appendTo in dialog to move the modal HTML to containing fieldset, to help prevent styling conflicts.

Comment #10

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 13 March 2019 at 21:13

File	Size
entity_reference_layout-z-index-problems_3038537-10.patch	15.45 KB

Changes were missing in patch - fixed.

Comment #11

13 March 2019 at 21:22

justin2pin authored dd1f656 on 8.x-1.x

Issue #3038537 by justin2pin: z-index problems with ERL modal when added...

Comment #12

justin2pin CreditAttribution: justin2pin at Aten Design Group commented 13 March 2019 at 21:24

Status:

Needs review

» Fixed

Tested in multiple environments and the switch to jQuery UI is working great.

@hctom Please let me know if you're still having issues after updating to latest dev version, and feel free to reopen.

Comment #13

27 March 2019 at 21:24

Status:

Fixed

» Closed (fixed)

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

Comment #14

Tom Robert CreditAttribution: Tom Robert commented 24 April 2019 at 16:04

Looks like this issue appears again with drupal 8.7-rc1,

I'm using it erl with media library and the library is appearing behind the paragraph screen.

Comment #15

edgt CreditAttribution: edgt commented 2 July 2019 at 04:34

Thank you for the patch, was having a nightmare with ckeditor panels not getting focus, ran the patch and found some warning but now the edit is working in page (bellow the visual preview)

Edit: was really tired that day, but after using the patch I noticed I just applied it badly and broke the modal (so could edit and use the panels but other stuff was broken), finally the only way to use the editor panel was changing the modal option from true to false.