CODEWITHSUNDEEP
ckeditor5
Gaurav
Gaurav

Reputation: 28765

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

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

enter image description here

Upvotes: 6

Views: 4432

Answers (8)

Ihor Lukanets
Ihor Lukanets

Reputation: 11

I had the same issue with sticky toolbar and none of suggested answer works well for me. After that I went to StickyPanelView#checkIfShouldBeSticky source code. There is check for limiterElement and toolbar won't be stiky if it's not set.

In my solution I simply override it on editor initialisation.

ClasicEditor.create(element, {
    // my configs
}).then((editor) => {
    // Disable sticky toolbar.
    editor.ui.view.stickyPanel.limiterElement = null;
});

This works well for me. Hope this helps.

Upvotes: 1

Raphael
Raphael

Reputation: 1812

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)
    })

Upvotes: 0

greatweatherforducks
greatweatherforducks

Reputation: 83

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.

  1. 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}}}"

  2. 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

Upvotes: 0

panta82
panta82

Reputation: 2721

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).

Upvotes: 2

Ilich
Ilich

Reputation: 1

CSS only:

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

Upvotes: 0

Kengda
Kengda

Reputation: 41

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;
}

Upvotes: 4

A Garhy
A Garhy

Reputation: 433

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 .

enter image description here

Upvotes: 0

Reinmar
Reinmar

Reputation: 22023

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

Upvotes: 1

Related Questions