CODEWITHSUNDEEP
ckeditoroverflow
Tieme
Tieme

Reputation: 65469

CKEditor "overflow: scroll" on parent causes toolbar to freeze at initial position

When you add a CKEditor to a div inside a div with: "overflow: scroll" the toolbar won't move when scrolling the parent div...

<div id="wrapper" style="overflow: scroll;">
    <div contenteditable="true">This is the ckedito</div>     
</div>

An example can be found here: ​http://jsfiddle.net/W8Dt4/

Does anyone know a workaround around this problem?

I think the desired behaviour would be:

Upvotes: 2

Views: 2483

Answers (2)

timmyfury
timmyfury

Reputation: 51

Using version 4.4.3, I was able to solve this problem by fire the window scroll event in a similar way that it is done in other areas in CKEditor. Attach a scroll event to the parent container that has overflow:scroll; set on it and trigger the window scroll within. The positioning is a little clunky but still works.

$("#parent-with-scroll").on('scroll', function (evt) {
    CKEDITOR.document.getWindow().fire('scroll');
});

Upvotes: 5

oleq
oleq

Reputation: 15895

Yup. CKEditor never considered such case and, most likely, editor will never deal with such edge case.

Still, what you need is a scroll listener for editor.element.getParent() in those lines of floatingspace plugin. Unfortunately, you have to wait for the ticket #9816 to be resolved, because it changes the way of re-positioning the toolbar, and makes your case possible to fix. Once the fix is released (in 4.2.1), you got to basically change the lines to look like this:

var elementParent = editor.element.getParent();

editor.on( 'focus', function( evt ) {
    ...
    elementParent.on( 'scroll', uiBuffer.input );
} );

editor.on( 'blur', function() {
    ...
    elementParent.removeListener( 'scroll', uiBuffer.input );
} );

editor.on( 'destroy', function() {
    ...
    elementParent.removeListener( 'scroll', uiBuffer.input );
} );

If you want, you can give it a try with this ticket branch. Otherwise, you got to need to wait for the upcoming release to patch your code.

There's also one thing that you need to know: each floating toolbar is appended to <body>, so it will never belong to the same (overflowed) container enclosing your editor. Even though the toolbar will scroll along with the container, it will always float above it and there's not much you can do about it unless you also hack this line. Note that I haven't tested it.

I hope this helped you.

Upvotes: 0

Related Questions