zindex issue between admin toolbar and ckeditor 5

I have added a patch for this, with variable z-index. Use the attched patch: 3426402.patch

Im not able to reproduce this issue . Attaching issue recording
Using Drupal 10.2.5 , Admin tool bar - 3.4.2

Testing steps :
1. Install drupal and admin tool bar module
2. Edit the editor for showing tools in 2 line
3. Create a content verify the ckeditor

I have created a new patch. The above patch didn't get applied for me.

Please review.

Uploading a new working patch.

Hi,
I've verified and tested Patch and applied "fix_admin_toolbar_overlap_with_ckeditor.patch" successfully on 10.2.x Version the changes are working as expected.

Testing Steps:
1. Install drupal and admin tool bar module
2. Edit the editor and select the "Full HTML" option in Text Format
3. Scroll up the page and Observe the changes there.

Testing Result
After scrolling up the page the there is no Z-index Issue between admin toolbar and ckeditor 5 and it is working as expected.

Attaching the screenshots for reference.

Hence moving to RTBC!
Thanks

Just tested this on:

• D10.3.0
• admin_toolbar:3.x-dev
• Current Windows Chrome browser

 
and was able to reproduce, see screenshot below:

Thanks a lot @divya.sejekan for the video which helped better understanding how this should be tested:

You need to scroll all the way down to the bottom of the editor and there is a really small/minor overlap where the CKEditor 5 Toolbar displays over the admin_toolbar.
But really, from what I have tested, this seems like a very minor issue.

Otherwise, @sdhruvi5142:
Could you please maybe provide a bit more information on the context of the issue and how it could be reproduced ?
See for example this isse 🐛 Link to "Block" content overview page not displayed Needs review with a recorded GIF file in the issue summary.

Thanks in advance!

I'm not convinced either one of these patches (#6 or #2) are what we want. While it moves down the ckeditor toolbar, it now hides the first item from the admin_toolbar dropdown. See attached screenshot.

Related to 🐛 Admin toolbar menu z-index sucks with devel module Needs review .

> I'm not convinced either one of these patches (#6 or #2) are what we want. While it moves down the ckeditor toolbar, it now hides the first item from the admin_toolbar dropdown. See attached screenshot.

You must not have implemented the patch correctly. Or your theme is adding additional zindexes to the module.

When I implement patch #6, it fully fixes the issue.

Thanks @neptune-dc for the recent feedback on this issue!

I took a closer look a few weeks back and was actually able to trace this down to the initialization of the view port offset of the CKEditor5 Toolbar....

In other words:
With the latest stable, for example 3.6.1, if you try reproducing the problem below:

Then, try resizing the window (without refreshing, just a small change of the window size):
If you test again, you should see the toolbar displays at the expected position right underneath the Admin Toolbar.

Therefore, it somewhere boils down to the initialization of some JS settings variables and/or to a "resize" event triggered.

See potentially related issue 🐛 element hangs, when Toolbar is hidden Active and Drupal.displace();

Maybe approaches with JS instead of CSS should be further explored.
It is likely this issue could be fixed with a few lines of JS code (?!)

Any testing, feedback and reviews would be greatly appreciated.
Thanks in advance!

Yes @dydave, I did also notice occasionally that the CKEditor toolbar would have the 80px offset with "Hidden" or Hidden, show on scroll up", which is being worked on in 🐛 element hangs, when Toolbar is hidden Active , it could be all connected :)

When I tried earlier to recreate it reliably, I could not ... but I tried again just now, and succeeded, so I have added fixing CKEditor toolbar offset as a task in the other issue.

To successfully recreate it, you might need to have content in the field, as well as place the cursor in the field.

Perhaps it's most ideal to look at all these position/z-index tasks in a single issue, and moving your observations and required tasks to 🐛 element hangs, when Toolbar is hidden Active , and closing this issue, since it only deals with a single scenario, and recent work is happening in the other issue?

I think a couple things are getting conflated, neither of which is really an admin_toolbar issue.

1) z-index:
The overlap issue also appears if you're just using the core toolbar. See 🐛 The CK Editor toolbar is overlapping with the Admin toolbar Active . Hopefully there will be a core fix at some point. In the meantime, we could mitigate the problem — @amit.mall was on the right track in #2. I would propose something like:

body:has(.ck.ck-editor) .toolbar-oriented .toolbar-bar {
  z-index: calc(var(--ck-z-panel) + 1);
}

2) Top offset:
When the editor area is focused, ckeditor is supposed to make the toolbar 'sticky' (with an appropriate offset), but 🐛 CKEditor5 sticky panel top offset does not get recalculated after calling Drupal.displace() Active . There might be something we could do to mitigate this, too, but I would argue any attempt should be handled in a separate issue.

Opened an MR with the mitigation proposed in #16. Static patch attached.

Thanks for taking a closer look at this @justcaldwell, as well as refining @amit.mall's MR, your plan sounds great. Adding the related CKEditor index and position issues you shared issues as such, to connect them all.

I can comfirm that patch #18 works as intended.

Adding @dydave's excellent image in the Issue Summary.

Back to Needs review after getting moved to RTBC at #21 to prevent MR from getting merged abruptly:

Please give us a little bit of time to review and test the changes. 🙂
But your feedback above and confirmation the changes worked as expected, were well received. 👌

Additionally, we'd like to squeeze in a few minor changes (wording, texts and such) in the next MR to get merged, so the opportunity to add another commit would be greatly appreciated by maintainers.

Any additional feedback, testing and comments would be welcome.
Thanks everyone for the great help on this issue! 🙏