search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
8.79k stars 3.64k forks source link

table toolbar overlaps editor toolbar #14886

Open compjotr opened 11 months ago

compjotr commented 11 months ago

📝 Provide detailed reproduction steps (if any)

  1. Add a table
  2. click on a cell
  3. click on a dropdown element in the editor toolbar

✔️ Expected result

The table dropdown is moved, or removed.

❌ Actual result

editor toolbar and table toolbar overlaps. Also fair to note that once i click on a table cell, the table toolbar will not go away regardless of where i click on the page.

Screenshot 2023-08-29 at 15 57 16

📃 Other details

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

compjotr commented 11 months ago

@Reinmar thank you! what about the bug where the table properties toolbar cannot be removed after it's been opened?

AliaksandrBortnik commented 11 months ago

Having a similar issue with a table properties balloon and toolbar dropdowns (or anything with a panel). The case is that CKE5 instance is placed inside a modal with its own z-index. The table properties balloon is in another stacking context. At the same time, all dropdowns z-index are limited by our modal z-index. That's why toolbar dropdowns are in a lower layer than table properties balloon. Balloon's z-index is higher than toolbar dropdowns/panels. Eventhough, by default, it is vice-versa 1001 vs 1000.

Facts:

  1. Table balloon z-index: 1000 (by default)
  2. Toolbar dropdowns (panels) z-index: 1001 (by default) In the simplest cases as on demo website, it would work.

However, let's imagine we have a modal with its own z-index and any position set. Steps:

  1. Go to CKE5 demo site.
  2. Assign z-index: 100 and position: relative to any parent container to simulate a modal container. Position is required to z-index being applied obviously.

image

  1. The result is that table balloon is overlapping regardless toolbar dropdown initially have z-index: 1001 which is higher. image

P.S. @compjotr table properties balloon is not closed while the editor is focused. It is intended behavior I think. It will be closed only on CKE5 outside click or adding a new paragraph or something like that.

Witoso commented 10 months ago

It looks like it works better on nightly after our recent massive changes to the balloon's architecture. Feel free to test it there, it should be a part of the next release.

mabryl commented 9 months ago

As of v40.0.0 of CKE5, the issue is no longer reproducible for the classic editor type as the dropdown is now displayed over (on top of) the table toolbar:

image

But the issue is still reproducible for an inline editor:

image