search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.66k stars 3.7k forks source link

Mentions Dropdown Balloon Z-index not showing above Bootstrap Modal #16266

Open bestGril opened 7 months ago

bestGril commented 7 months ago

At first I thought that the Mentions Plugin wasn't working because I wasn't seeing the dropdown. But out of the corner of my eye I caught this.

image

I'm using Bootstrap 5 in react.

I even followed this to set the root styles.

https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/css.html#compatibility-with-bootstrap

To be clear I copied the inital css layout that was provided on the documentation here

https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html#the-full-list-of-content-styles

and set the suggested styles in that sheet which i included in the index.html includes.

But it doesn't seem to be working. Tried changing 999 to something 999999

Not sure if it really matters but I also built this through the custom online builder

MohamedAbdElgni commented 1 month ago

Any updates on this ?

MohamedAbdElgni commented 1 month ago

FYI,

<style>
    :root {
    --ck-z-default: 100;
    --ck-z-panel: calc( var(--ck-z-default) + 999 );
}
</style>

this fixed the problem ref: DOCS