AdobeDocs / AdobeDocs/cc-everywhere

CC Express popup is partly overlapped by other elements

Open
#20 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
16
Forks
67
Avg merge
1d 1h
Merged PRs (30d)
4

Description

### Expected Behaviour

When opening the CC Express overlay to create a new asset, I expect the overlay not to be obstructed by other page elements, so that I can edit the CC Express project.

### Actual Behaviour

When opening an overlay in the WordPress integration, the sidebar overlaps the CC Express overlay:

![Bildschirmfoto 2022-02-19 um 00 54 41](https://user-images.githubusercontent.com/7101151/154776029-a7e6f386-e14d-4619-ba94-503347fac595.png)

Since there is a custom `cc-everywhere-container` element, it is not possible to modify its contents using vanilla JavaScript, jQuery or CSS.
Manually setting the `z-index` for the `.cc-everywhere-root` element to `9991` or higher in the Chrome developer console, brings the editor to the front. This is due to the fact, that the sidebar has a `z-index` of `9990`:

![Bildschirmfoto 2022-02-19 um 00 59 35](https://user-images.githubusercontent.com/7101151/154776368-cbb52d21-3051-4cd1-b018-686211fc986f.png)

This modification cannot be made using client-side JavaScript or CSS, as stated above.

Depending on the underlying system, it would be great to have a callback – e.g. `onLoad` that passes back the HTML element where the component is mounted or the component itself, so that a developer can modify its appearance to match the website where the dialog is being shown.
Furthermore, more customization options would be great - for example being able to set a max width or max height or specifying an element, where the component will be mounted in (in the case of a WordPress integration, this may be the `.wrap` element).
Otherwise, since it is a popup, the overlay may have a very high `z-index` on its own.

### Reproduce Scenario (including but not limited to)

Will be delivered as soon as there is a working integration to host a public version of the plugin.

#### Steps to Reproduce

* Open the dialog
* See the dialog being obstructed

#### Platform and Version

* Google Chrome 98.0.4758.102
* macOS 12.2.1

#### Sample Code that illustrates the problem

Will be delivered as soon as there is a working integration to host a public version of the plugin.

#### Logs taken while reproducing problem

none

Contributor guide

Open the contributing guide

Research direction

Start with the CC Express overlay in the WordPress integration and reproduce the sidebar overlap in Chrome 98 on macOS 12.2.1; the issue says a public integration is still needed. Done means the overlay is no longer obstructed and the requested mounting or customization behavior has a defined outcome.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.