Balloon toolbar overflows outside the editor

[kubaklatt]

📝 Provide detailed reproduction steps (if any)

1. Open the prepared sample to reproduce the issue: issue.zip

(This is a classic editor sample generated from the builder with a balloon toolbar, only the editor height has been changed and a header has been added)

2. Bring up the balloon toolbar and scroll the content down

✔️ Expected result

The balloon toolbar remains within the boundaries of the editor and does not overflow outside of it.

❌ Actual result

The balloon toolbar extends beyond the boundaries of the editor and overflows outside of it.

overflowing.mov

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

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

[Witoso]

Please always add screenshots to the issues. Thanks to that, we will be able to quickly asses if it's an issue related to some other or a duplicate.

[kubaklatt]

Sorry, I don't know why I didn't add a screencast. Done already 👌🏼

[Witoso]

May be related: #17009, #14662

But #14662, mentions it shouldn't happen for balloons anymore (but maybe it meant feature's toolbars). Could you check the behavior of a feature toolbar? Is this a regression?

[kubaklatt]

If you mean the balloon editor, from what I see the toolbar can also float outside the editor (I don't know if it matters, but for me it was more reproducible and noticeable at slower scrolling).

Screen.Recording.2025-01-28.at.13.22.14.mov

It also looks like a problem from that former PR - #14755

[Witoso]

All screencasts show balloon toolbar, PR related to features' balloon toolbar. @pszczesniak I assume there's a difference. There's also ui.viewportOffset option but this is for fixed elements near the editor.

[pszczesniak]

Yes, it needs a deeper investigation.

For "simple" balloon it works ok - i've tested it here (i've added height to the editing view div). When i want to add a link on a selected word and scroll it outside editor - it disappeared, like it should.

In some cases it's not working with toolbars balloons.

But image and table toolbars works ok (tested on full-feature example with editor height set to 300px).