The CK Editor toolbar is overlapping with the Admin toolbar

Created on 26 December 2023, over 1 year ago

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
4. Scroll down until the CKEditor toolbar reaches the top of the page.

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
CKEditor 5 

Last updated 3 days 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 over 1 year ago
  • 🇮🇳India ahsannazir

    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 over 1 year 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 ahsannazir

    Raised MR to change z-index.

  • Status changed to Needs review about 1 year 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 about 1 year 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 ahsannazir

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

  • Status changed to Needs review about 1 year ago
  • Status changed to RTBC about 1 year 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 about 1 year 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 🇧🇪🇪🇺
  • 🇵🇱Poland wojtek_kuk

    Changes to CKEditor's dll files should be avoided as it would be overwritten with CKEditor 5 version upgrade.
    I have prepared a css fix that works for toolbar and powered by badge.
    I'll create PR later today or tomorrow as currently at #WarsawContributionWeekend2025 I don't have access to my main account.

  • leymannx Berlin

    Friends, please: There's just one ContributionWeekend tag. We want to count all issues afterwards easily and have them all show up on one page easily.

    Thank you! Happy contribution weekend everybody 🤗

Production build 0.71.5 2024