ckeditor
table toolbar overlaps editor toolbar
📝 Provide detailed reproduction steps (if any)
- Add a table
- click on a cell
- 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.
📃 Other details
-
Browser chrome
-
OS: macOS monterey
-
First affected CKEditor version: 33. now using 39. same error
-
Installed CKEditor plugins: "@ckeditor/ckeditor5-alignment": "39.0.1", "@ckeditor/ckeditor5-autoformat": "39.0.1", "@ckeditor/ckeditor5-autosave": "39.0.1", "@ckeditor/ckeditor5-basic-styles": "39.0.1", "@ckeditor/ckeditor5-block-quote": "39.0.1", "@ckeditor/ckeditor5-cloud-services": "39.0.1", "@ckeditor/ckeditor5-editor-classic": "39.0.1", "@ckeditor/ckeditor5-essentials": "39.0.1", "@ckeditor/ckeditor5-find-and-replace": "39.0.1", "@ckeditor/ckeditor5-font": "39.0.1", "@ckeditor/ckeditor5-heading": "39.0.1", "@ckeditor/ckeditor5-highlight": "39.0.1", "@ckeditor/ckeditor5-horizontal-line": "39.0.1", "@ckeditor/ckeditor5-html-support": "39.0.1", "@ckeditor/ckeditor5-image": "39.0.1", "@ckeditor/ckeditor5-indent": "39.0.1", "@ckeditor/ckeditor5-language": "39.0.1", "@ckeditor/ckeditor5-link": "39.0.1", "@ckeditor/ckeditor5-list": "39.0.1", "@ckeditor/ckeditor5-media-embed": "39.0.1", "@ckeditor/ckeditor5-page-break": "39.0.1", "@ckeditor/ckeditor5-paragraph": "39.0.1", "@ckeditor/ckeditor5-paste-from-office": "39.0.1", "@ckeditor/ckeditor5-select-all": "39.0.1", "@ckeditor/ckeditor5-special-characters": "39.0.1", "@ckeditor/ckeditor5-table": "39.0.1", "@ckeditor/ckeditor5-typing": "39.0.1", "@ckeditor/ckeditor5-upload": "39.0.1"
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
@Reinmar thank you! what about the bug where the table properties toolbar cannot be removed after it's been opened?
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:
- Table balloon z-index: 1000 (by default)
- 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:
- Go to CKE5 demo site.
- Assign
z-index: 100 and position: relativeto any parent container to simulate a modal container. Position is required to z-index being applied obviously.
- The result is that table balloon is overlapping regardless toolbar dropdown initially have z-index: 1001 which is higher.
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.
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.
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:
But the issue is still reproducible for an inline editor:
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).