CKEditor: toolbar dropdowns open out of line

Question

I use inline ckeditor on my webpage. This works perfectly everywhere besides in a modal. What happen is that dropdowns in the toolbar show 50-200px above the rest of the toolbar when clicked. ex styles or font selection. I can not figure out WHY! and the error is only in this modal, not anywhere else. Does anyone have any idea why? Is it CSS inheritance? Is it that I render elements above the ckeditor after the ckeditor is rendered?

My initialization looks like this:

<div class="text-and-toolbar">
   <div id="<%= UID %>-cktool" class="ckeditor-toolbar-div hidden"></div>
   <div class="text-field" id="<%= UID %>" data-fieldid="<%= FieldId %>">
   <div class="ckEditor read-only-content" contenteditable="true" id="<%= UID %>-textarea"><%= Content %></div>
</div>

var toolbar = self.$("#"+self.$(".text-field").attr("id") + "-cktool");
editor = (this.editor = CKEDITOR.inline(this.textarea[0],
{
      sharedSpaces:{
                     top: self.toolbar.attr("id")
      }
}));

toolbar in config.js:

config.toolbar =
[
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll'] },
    { name: 'colors', items: ['TextColor'] },
    { name: 'insert', items: ['Table', App.currentUser.isSuperAdmin ? 'Image' : ''] },
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
    { name: 'plugin', items: ['SpellChecker', 'Scayt', 'Sourcedialog'] },
    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] }
];

UPDATE: So I figured out why, but not how to fix it. The modal has a scrollbar (the body-content is longer than the modal). When editing the content in the browser to be as long as the modal, it works.

TorK TorK · Accepted Answer · 2017-01-31T09:40:13

0

votes

Fixed: Had to set the modal css FROM

 position: absolute;

to:

 position: static;

CKEditor: toolbar dropdowns open out of line

1 Answers