This issue has been kind of mentioned in a couple other forum posts, but there haven't been any resolutions or good workarounds presented so I thought I would present the issue again. If you have an editable element within a scrolling div, the first time you open the toolbar it positions correctly, but if you scroll the div and then click the element again, the toolbar opens in the original position, it doesn't reposition itself. You can create this on the demo page by doing the following
- Click inline editing demo
- Within firebug or chrome dev tools, add a height:500px and overflow:auto to the <div id="inline-container"> element that is surrounding the editable elements.
- Click on one of the editable elements so the toolbar shows, then click off so it hides.
- Scroll the scrollbar for the div.
- Click on the element again. The toolbar shows in it's original position.
A couple tickets I found related to this were this http://dev.ckeditor.com/ticket/9903 and this https://dev.ckeditor.com/ticket/9899. One ticket is still open and the other one didn't fix this issue.
For sites like ours which have users do a lot of editing within dialogs, this is a pretty significant problem. We present tables of values that users can edit, so there is almost always scrolling and there are lots of editors being used.
I haven't been able to find any method that I can try to manually call to force the toolbar to reposition itself. Only workaround I saw that may work is to destroy and recreate the editor each time, which seems like overkill.
UPDATE: Sorry, I finally found another related ticket, http://dev.ckeditor.com/ticket/9816, that I believe has the fix for this. It is supposed to go out with 4.2.1.