ckeditor5
ckeditor5 copied to clipboard
Toolbar in InlineEditor is wrongly positioned when CKEditor is nested in fixed block
📝 Provide detailed reproduction steps (if any)
Ready code: https://jsfiddle.net/s9rzmwvn/
- Create structure so that Inline CKEditor is nested in
overflow-y: scroll
div that starts from certain point on page (like 200px from top in my example) - CKEditor has to also be nested in some div that has
position: fixed
and starts before block from point 1 (top position for CKEditor has to be higher than block with overflow) - Focus CKeditor to show toolbar
✔️ Expected result
Toolbar is glued to the top of CKEditor
❌ Actual result
Toolbar is position somewhere in the middle of editor, to be more precise: it's positioned in the place where block with overflow starts
❓ Possible solution
Bug is caused by Rect
class, or rather its function getVisible
that is used to position toolbar. while
loop traverse from CKEditor element up to body element, where in this case it probably should stop on parent that has position: fixed
https://github.com/ckeditor/ckeditor5/blob/453f50748a12e87d36c64d395f9fb24f3cc883a4/packages/ckeditor5-utils/src/dom/rect.ts#L254
📃 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.