CC Express popup is partly overlapped by other elements

[barooney]

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:

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:

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

[barooney]

Currently, I am hiding the admin bar, setting its z-index to a lower value. That seems to work as well.
For now, I consider this to be solved. 😅

[claudiaGe]

I reopened the issue, as I faced the same problem and it is probable that other developers will too

Expected Behaviour

The Adobe CCE-Popup should be positioned at the very front, no elements should overlap the iFrame.

Actual Behaviour

The Adobe CCE-iFrame is not at the very front. The .cc-everywhere-root or the cc-every-where-container don't have a z-index. Because of that, some elements of our software with an z-index overlap the iFrame.

We found a workaround by passing the following code to the callback-function onLoadStart:

onLoadStart: () => {
  try {
      const ccERoot = [...document.body.children].find(c => c.tagName.toLowerCase().startsWith('cc-everywhere'));
      ccERoot.style.position = 'absolute';
      ccERoot.style.zIndex = 2000;
    } catch (err) {
      console.log('ERROR', err);
    }
},

Even tough we found a workaround, it would be great to being able to pass styling-properties as params (e.g. z-index and position).

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Example: When using the code of the cc-everywhere/sample (Github): add position: absolute and z-index: 1 (or higher) to the class spectrum-Typography.

When opening the Editor, it should look like this:

Platform and Version

Google Chrome Version 110.0.5481.100 (Official Build) (64-bit)

Sample Code that illustrates the problem

see above in Steps to Reproduce

Logs taken while reproducing problem

none

[amandahuarng]

Thanks for reporting this problem. I'll pass this along to our team to investigate. In the future, please report any bugs here.