Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor 5 toolbar fixed position

When you are adding long content in CKEditor 5 classic, on scroll the toolbar becomes fixed to the top in the browser window.
But I have a fixed positioned white logo area with a menu bar beneath and the toolbar appears above them:

enter image description here

How can I make it stay under my fixed header/navigation?

like image 729
Barnee Avatar asked Oct 30 '25 19:10

Barnee


1 Answers

I've managed to find the answer:

  1. You have to install npm install --save @ckeditor/ckeditor5-ui
  2. Add to the config: viewportTopOffset : Number

example:

ClassicEditor.defaultConfig = {
toolbar: {      
    viewportTopOffset : 50,    <-- height of fixed header
    items: [
        'heading',
        '|',
        'highlight',
        '|',
        'bold',
        'italic',
        ...
like image 98
Barnee Avatar answered Nov 01 '25 08:11

Barnee



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!