zindex issue between admin toolbar and ckeditor 5

Created on 7 March 2024, 8 months ago
Updated 2 August 2024, 4 months ago

Problem/Motivation

I used ckeditor 5 and admin toolbar, when I focused cursor to my ckeditor 5 AND scroll down, the ckeditor 5 goes over the admin bar briefly.
See screenshots attached.

Steps to reproduce

Ckeditor 5 (in my case, the ckeditor has two rows of buttons, a great height (493px , toolbar included).
Drupal 10.2.4
Admin toolbar 3.4.2

Proposed resolution

By increasing the z-index manually in my browser, I managed to fix the problem (I tested quickly with 1500 instead 501 in .toolbar .toolbar-tray and .toolbar-oriented .toolbar-bar

🐛 Bug report
Status

Needs work

Version

3.0

Component

User interface

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Tichris59
  • 🇮🇳India amit.mall

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

  • Status changed to Needs review 8 months ago
  • Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 8
    last update 8 months ago
    Waiting for branch to pass
  • 🇮🇳India divya.sejekan

    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

  • 🇮🇳India gg24

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

    Please review.

  • 🇮🇳India gg24

    Uploading a new working patch.

  • 🇮🇳India sdhruvi5142

    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

  • Status changed to RTBC 4 months ago
  • Status changed to Active 4 months ago
  • 🇫🇷France dydave

    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!

  • First commit to issue fork.
  • Status changed to Needs work 4 months ago
  • 🇺🇸United States japerry KVUO

    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.

Production build 0.71.5 2024