Toolbar overlaps Drupal toolbar

Open on Drupal.org →

Created on 31 January 2024, 11 months ago

Updated 1 February 2024, 11 months ago

Problem/Motivation

When I load the page, scroll down to the CKeditor window, and click on the WYSIWYG, my Ckeditor5 toolbar shows up on top of the Drupal admin toolbar.

This only happens with the CKEditor5 Template plugin in my CKEditor toolbar. I also reproduced this on Simplytestme with just this module and a default drupal installation:

This problem goes away if you:
- Resize your screen
- Toggle to the sidebar view of the admin toolbar

I tried to debug a little but the js is beyond me. The best I could understand is that the "drupalViewportOffsetChange" event is triggered by both of the items above, but is not triggered when you first load the page. The top of the CKEditor toolbar is set using "editor.ui.viewportOffset" which is supposed to be at 79 but ends up being at 0 until you've triggered that drupalViewportOffsetChange event.

Steps to reproduce

On a "Standard" install of D10.2.2, enable this module and add it to your Full HTML editor.

Go to create a new article. Make your screen height small enough that your CKEditor toolbar is above the top of the viewport. Refresh the page.

Click on the CKeditor text area and scroll until the toolbar would stick to the top of the page. See it stick to the very top, not to just under the admin toolbar.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Closed: works as designed

Version

1.0

Component

Code

Created by

🇺🇸United States mariacha1

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Comments & Activities

Issue created by @mariacha1
Comment 11 months ago →
🇺🇸United States mariacha1
Status changed to Closed: works as designed 11 months ago8:26am 1 February 2024
Comment 11 months ago →
🇩🇪Germany vincent.hoehn Dresden, Germany
Hi @mariacha1,

I could understand what you mean and where the problem lies.
But in my opinion, this is not a bug of the ckeditor5_template module.
I followed your instructions. I have included the module in Basic HTML, but not in Full HTML.
When I create an article, reduce the browser window and click in the edit field, the toolbar overlays the admin toolbar.
However, this also happens when I switch to a text format where the template module is not active.

In my opinion, this is due to CKEditor5 and/or the theme.

Best regards,
Vincent
Comment 11 months ago →
🇺🇸United States mariacha1
Aha, it looks like https://www.drupal.org/project/drupal/issues/3348132 🐛 Dynamically instantiated CKEditor 5 instance's toolbar occludes Drupal's toolbar if it has focus and the form is part of paragraph Active is what you're describing. So I'll post/follow there and hope that takes care of things. Thanks for the hint!

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024