The CKEditor 5 toolbar is overlapping with the Admin toolbar

Created on 26 December 2023, 11 months ago
Updated 29 February 2024, 9 months ago

Steps to reproduce

1. Go to any node create/edit page
2. Switch to Full HTML/ basic html format in ckeditor
3. Click on any component i.e paragraph or styles to make toolbar active
4. Scroll down until the CKEditor toolbar reaches the top of the page.

Additional info -
Os - windows 11 pro
Screen Resolution :1366 X 768
Browser - latest chrome

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
CKEditor 5 

Last updated about 18 hours ago

Created by

🇮🇳India amietpatial

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

Merge Requests

Comments & Activities

  • Issue created by @amietpatial
  • As CKEditor (4) module is no longer in core, I assume this bug is for the current module.

  • Status changed to Needs review 11 months ago
  • 🇮🇳India ehsann_95

    The toolbar is working as expected. I was not able to reproduce the issue. The CKEditor toolbar is sticky only when in focus and is positioned correctly below the admin toolbar.

  • Assigned to divya.sejekan
  • Issue was unassigned.
  • Status changed to Needs work 11 months ago
  • 🇮🇳India divya.sejekan

    Issue is reproducible. The Ckeditor Tool bar Overlaps the admin menu

    Steps to reproduce
    1. Go to any node create/edit page
    2. Switch to Full HTML format in ckeditor
    3. Click on any component i.e paragraph or styles to make toolbar active .. Open dropdown and scroll
    4. Scroll down until the CKEditor toolbar reaches the top of the page.

  • 🇮🇳India djsagar

    This issue replicated on macbook as well,

    chrome

    safari

    firefox

  • 🇮🇳India djsagar

    Changing z-index will work on this.

    .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
    z-index: 1;
    }

  • Merge request !6034Change ck-sticky-panel z-index to 1. → (Open) created by Unnamed author
  • Verified that, the issue is reproducible. The Ckeditor Tool bar is Overlapping the admin menu

    Steps to reproduce
    1. Go to any node create/edit page
    2. Switch to Full HTML format in ckeditor
    3. Click on any component i.e paragraph or styles to make toolbar active .. Open dropdown and scroll or select anything in dropdown
    4. Scroll down until the CKEditor toolbar reaches the top of the page.

  • 🇮🇳India ehsann_95

    Raised MR to change z-index.

  • Status changed to Needs review 10 months ago
  • Assigned to divya.sejekan
  • 🇮🇳India __i.am.prashant__

    I tried MR !6034 but it still show the same issue. the issue is not only comes with Full HTML but also Basic html.
    Please see below attachments that how looks ckeditor toolbar after apply MR.

  • Issue was unassigned.
  • Status changed to Needs work 10 months ago
  • 🇮🇳India divya.sejekan

    The issue is still reproducible if the dropdown is kept open and scrolled.

    The issue is resolved if the dropdown is closed and the toolbar is active

    Steps to reproduce
    1. Go to any node to create/edit the page
    2. Switch to Full HTML format in CKEditor
    3. Click on any component i.e paragraph or styles, keep the dropdown open and scroll
    4. Scroll down until the CKEditor toolbar reaches the top of the page.

  • 🇮🇳India ehsann_95

    Added changes for changing the z-index of dropdown-panel

  • Status changed to Needs review 10 months ago
  • Status changed to RTBC 10 months ago
  • 🇮🇳India divya.sejekan

    All ToolBar Overlapping issues resolved. Verified for Full HTML Editor with open and closed dropdown state. Also verified for Basic HTML editor.

    Moving Issue to RTBC ++

    Testing Steps :
    1. Go to any node to create/edit the page
    2. Switch to Full HTML format in CKEditor
    3. Click on any component i.e paragraph or styles, keep the dropdown open and scroll
    4. Scroll down until the CKEditor toolbar reaches the top of the page.

  • Status changed to Needs work 9 months ago
  • 🇫🇷France nod_ Lille

    Why is it that only the ckeditor dll is changed? there is nothing I can review here.

    Please post the steps you took to make the change as I can't review an already built file that comes from a third party.

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺
Production build 0.71.5 2024