| 1 | <!DOCTYPE html> |
|---|
| 2 | <!-- Place in the samples directory --> |
|---|
| 3 | <html> |
|---|
| 4 | |
|---|
| 5 | <!-- These lines are the critical parts --> |
|---|
| 6 | <body style="position: relative"> |
|---|
| 7 | <script src="../ckeditor.js"></script> |
|---|
| 8 | <div style="margin-top: 200px;"></div> |
|---|
| 9 | <div id="editor" contenteditable="true"> |
|---|
| 10 | <p><b>Edit Me</b></p> |
|---|
| 11 | |
|---|
| 12 | <p>Toolbar should be above me when focused, but appears too low.</p> |
|---|
| 13 | </div> |
|---|
| 14 | <script> |
|---|
| 15 | CKEDITOR.inline('editor'); |
|---|
| 16 | </script> |
|---|
| 17 | |
|---|
| 18 | |
|---|
| 19 | <!-- This is to illustrate the error --> |
|---|
| 20 | <dl> |
|---|
| 21 | <dt><code>CKEDITOR.editable.getDocumentPosition().y</code></dt> |
|---|
| 22 | <dd id="CK-gdp"></dd> |
|---|
| 23 | <dt><code>jQuery.offset().top</code> (red dot)</dt> |
|---|
| 24 | <dd id="jQ-off"></dd> |
|---|
| 25 | <dt><code>jQuery.position().top</code> (green dot)</dt> |
|---|
| 26 | <dd id="jQ-pos"></dd> |
|---|
| 27 | </dl> |
|---|
| 28 | |
|---|
| 29 | <style type="text/css"> |
|---|
| 30 | .dot { |
|---|
| 31 | position: absolute; |
|---|
| 32 | height: 10px; |
|---|
| 33 | width: 10px; |
|---|
| 34 | } |
|---|
| 35 | </style> |
|---|
| 36 | <div id="red" class="dot" style="background-color: red"></div> |
|---|
| 37 | <div id="green" class="dot" style="background-color: green"></div> |
|---|
| 38 | |
|---|
| 39 | <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> |
|---|
| 40 | <script> |
|---|
| 41 | var editor = CKEDITOR.instances.editor; |
|---|
| 42 | editor.on('instanceReady', function (e) { |
|---|
| 43 | $('#CK-gdp').append(e.editor.editable().getDocumentPosition().y); |
|---|
| 44 | }); |
|---|
| 45 | $(function() { |
|---|
| 46 | var $editor = $('#editor'), |
|---|
| 47 | offset = $editor.offset(), |
|---|
| 48 | position = $editor.position(); |
|---|
| 49 | |
|---|
| 50 | $('#jQ-off').append(offset.top); |
|---|
| 51 | $('#red').css(offset); |
|---|
| 52 | |
|---|
| 53 | $('#jQ-pos').append(position.top); |
|---|
| 54 | $('#green').css(position); |
|---|
| 55 | }); |
|---|
| 56 | </script> |
|---|
| 57 | |
|---|
| 58 | </body> |
|---|
| 59 | </html> |
|---|
