Ckeditor5: Add Link Tooltip has lower Z-Index than Inline Editor Toolbar.

Created on 30 Oct 2019  ·  1Comment  ·  Source: ckeditor/ckeditor5

📝 Provide detailed reproduction steps (if any)

  1. Create an Inline Editor
  2. On the first line try add a link.
  3. See the tooltip for adding links hidden by the Inline editor toolbar.

✔️ Expected result

Tooltip is above and visible/usable.

❌ Actual result

Tooltip is hidden by the toolbar.
image

📃 Other details

  • Browser: Any
  • OS: Any
  • CKEditor version: 15.0.0
  • Installed CKEditor plugins: Essentials

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

uux bug

Most helpful comment

Can confirm it. For the time being you can get around this easily with CSS:

.ck.ck-balloon-panel:not(.ck-toolbar-container) {
    z-index: 1001;
}

Reason this is happening in a first place is that both toolbar and balloon panels share .ck-balloon-panel class, which have z-index applied, while balloon panel occurs later in the DOM tree.

>All comments

Can confirm it. For the time being you can get around this easily with CSS:

.ck.ck-balloon-panel:not(.ck-toolbar-container) {
    z-index: 1001;
}

Reason this is happening in a first place is that both toolbar and balloon panels share .ck-balloon-panel class, which have z-index applied, while balloon panel occurs later in the DOM tree.

Was this page helpful?
0 / 5 - 0 ratings