Opened 8 years ago

Last modified 8 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:


Steps to reproduce

  1. 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">
  2. 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)

mini.html (1.5 KB) - added by Benabik 8 years ago.
Minimum example of bug, plus jQuery demonstration of right and wrong places.

Download all attachments as: .zip

Change History (2)

Changed 8 years ago by Benabik

Attachment: mini.html added

Minimum example of bug, plus jQuery demonstration of right and wrong places.

comment:1 Changed 8 years ago by Jakub Ś

Status: newconfirmed

Problem can reproduced from CKEditor 4.0 in all browsers.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy