Opened 9 years ago
Last modified 9 years ago
#14434 confirmed Bug
Floating toolbar misplaced w/ body { position: relative; } and margin-top
| Reported by: | Benabik | Owned by: | |
|---|---|---|---|
| Priority: | Normal | Milestone: | |
| Component: | General | Version: | 4.0 |
| Keywords: | Cc: |
Description
Steps to reproduce
- Create a page with: (see attachment)
<body style="position: relative">(used by Foundation 5)<div style="margin-top: 200px"></div>(any length works, but a large one makes it obvious)<div contenteditable="true">
- Activate an inline editor on the last div.
Expected result
Toolbar appears at the top of the editable div.
Actual result
Toolbar appears 200px below that.
Other details (browser, OS, CKEditor version, installed plugins)
Tested most thoroughly in Safari on OS 10.11.3, but also occurs in Chrome on Windows (not certain of versions).
Occurs with just a CKEditor Basic install. Placing the attached file in the samples directory shows the error.
When determining the source of the error, I noticed that the floatspace plugin uses CKEDITOR.editable.getDocumentPosition() to get the values for the top and left CSS properties for the toolbar. The issue is that this function measures the position from the top of the document, which is not necessarily where CSS top measures from. The attached HTML uses jQuery to illustrate the difference, as $.fn.position() gets the correct value.
Attachments (1)
Change History (2)
Changed 9 years ago by
comment:1 Changed 9 years ago by
| Status: | new → confirmed |
|---|---|
| Version: | 4.5.7 → 4.0 |
Problem can reproduced from CKEditor 4.0 in all browsers.
Minimum example of bug, plus jQuery demonstration of right and wrong places.