Ckeditor5: ckEditor-Angular, viewportTopOffset: is not working

[kapilthakkar2912]

Is this a bug report or feature request? (choose one)

🐞 Bug report

ckEditor 5 - with Angular

ClassicEditor

add viewportTopOffset in config json as below

public ckEditorConfig = {
      viewportTopOffset: 300,
        toolbar: [
          'heading',.....
.........

✅ Toolbar should work as sticky

❎ Not working as sticky

[Mgsy]

Hello, viewportTopOffset property should be defined inside toolbar (look at the example on our documentation page).

Your config should look like this:

```js
public ckEditorConfig = {
toolbar: {
items: [ 'heading' ],
viewportTopOffset: 300
}
// ...
}

[kapilthakkar2912]

Sorry my bad :(

But when image added then toolbar get overlap.

[ma2ciek]

Hi @kapilthakkar2912,

Probably your CSS overrides the default CKEditor 5 CSS for the image. We can't do anything about it. You should create a page which CSS don't affect the CKEditor 5 editor.

These are the default styles for the image element:

.ck-content .image>img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

And note that if you have:

img {
   // some prop: value;
}

Then it will affect all images, including images in the CKEditor 5 editor.

[kapilthakkar2912]

Hi @ma2ciek ,
Thank you for your replay.

I have added following css code in style.css and its work :).

.ck-content .image>img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}