How to disable sticky toolbar in classic editor when page is scrolled? - ckeditor5

Question

I want to disable sticky toolbar which appears on top of page when page is scrolled. How it can be done ?

Answer 1

I resolve this problem by CSS
.ck.ck-editor__top.ck-reset_all {
z-index: var(--ck-z-modal);
position: sticky;
top: 0;
}
.ck.ck-sticky-panel__placeholder {
display : none !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: unset;
}

Answer 2

The fact that the toolbar appears in the wrong place when the editor is in an overflowed container is a bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) allow controlling the toolbar. This editor type doesn't do anything with the toolbar itself – it just creates it and it's up to you where you're gonna insert it.
Another option would be implementing your own custom editor, but that'd be necessary only if you wanted to make even more customizations

Answer 3

I'm having same issue with the classic-editor, the position of the .sticky_panel is changing on the event of focus in the .editor_editable.
at some point when it's not visible within the display and click inside it goes all up to first element .

Answer 4

CSS only:
ck.ck-sticky-panel .ck-sticky-panel__content_sticky {​​​​​​​​​​​
    position: absolute !important;
}

Answer 5

In my editor build, I did a hack like this:
const stickyUpdateInterval = setInterval(() => {
editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
clearInterval(stickyUpdateInterval);
});
This is just a crude hack that will update sticky balloon all the time.
If you know exactly in which overflow container your editor will be mounted, you can do something more clever, like listen to scroll events and update only then (this is what CKEditor is doing for the window, BTW, that's why it's not working when you put it in a container).

Answer 6

I have spent some time trying to get the CKEditor Classic component "sticky toolbar" to work nicely in Angular with a scrolling pane and there are 2 issues I had to overcome.
The position of the toolbar when sticky this defaults to the top
of the browser page (view port) - so (in Angular) you need to
configure this setting in the HTML template :
[config]="{ui:{viewportOffset:{ top: 58, right: 0, bottom: 0, left:
0}}}"
Making the editor respond to scrolling. This was a more difficult
one to resolve for me. The solution I have is (thanks to panta82
above) is to catch the scroll events and call a function in the
editor to check if the toolbar should be sticky or not .. it's
called checkIfShouldBeSticky :)
Here is a working sample in StackBlitz

Answer 7

I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})