Toolbar and tooltips get cropped when the editor is wrapped in a narrow container

[gfox1984]

📝 Provide detailed reproduction steps (if any)

When you place CKEditor in a narrow container with overflow auto or hidden, its toolbar and tooltips get cropped.
I have created a jsfiddle that demonstrates the issue: https://jsfiddle.net/gfox1984/9nz0aqvL/

✔️ Expected result

The tooltip and toolbar should either display above the container (so they are not cropped) or they should wrap in the available space.

❌ Actual result

Tooltips are cropped:

Toolbar is cropped:

❓ Possible solution

Handle the toolbar and tooltips the same as the image toolbar for instance:

Or wrap the toolbar on several lines, as in #8553 (but within the overflow container, rather than within the window)

📃 Other details

Tested with:

• Browser: Chrome 96
• OS: Windows 10
• First affected CKEditor version: probably all (tested with 31.0.0)
• Installed CKEditor plugins: classic preset

---

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

[gfox1984]

Just a note: I've verified that both the inline and balloon editors are able to display their toolbar outside of the container. That'd be nice to have the same capability for the classic editor.

[oleq]

Turns out #12262 didn't close this one. We need another fix.

[CKEditorBot]

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 be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).