Ckeditor5: ck-balloon-panel not visible using Bootstrap 4 modal (z-index).

[ghost]

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

🐞 Bug report

💻 Version of CKEditor

5 latest

📋 Steps to reproduce

.ck-balloon-panel not visible using Bootstrap 4 modal (z-index lower).

Is there a way to customize z-index?

[dkonopka]

Hello @johnunclesam, CKEditor 5 is using 1000 value as default z-index for balloons, but you can easily change it via CSS Variables.

As I can see bootstrap 4 is using 1070 as maximum z-value, so you need to add this code in your stylesheet or directly in the HTML file:

:root {
   --ck-z-default: 100
}

You can find more details about theme customization in our documentation.

[Reinmar]

As I can see bootstrap 4 is using 1070 as maximum z-value, so you need to add this code in your stylesheet or directly in the HTML file:

So, shouldn't you use 1071+ to display CKE5's balloons over Bootstrap 4 modals? Like:

:root {
   --ck-z-default: 2000;
}

[dkonopka]

So, shouldn't you use 1071+ to display CKE5's balloons over Bootstrap 4 modals? Like:

We have introduced relative z-indexes values recently, so you need to change only one default property in our CSS Variables set.

Balloons in CKE5 are using --ck-z-modal variable, so changing --ck-z-default to 100 will be enough.

[Reinmar]

Balloons in CKE5 are using --ck-z-modal variable, so changing --ck-z-default to 100 will be enough.

Won't that display CKEditor 5 below the Bootstrap's modal? I think the point is to display it above it. Am I right, @johnunclesam?

[dkonopka]

Won't that display CKEditor 5 below the Bootstrap's modal?

No, CKE5 content will be still visible, take a look at live demo with bootstrap 4 modal.

[Reinmar]

Sorry. I didn't know that we defined --ck-z-modal as this: --ck-z-modal: calc( var(--ck-z-default) + 999 ); which results in z-index: 1099 so, more than 1071.

[Reinmar]

I'm closing this ticket as resolved as this is something to be configured on integration's side. The solution is to define:

:root {
   --ck-z-default: 100
}

as @dkonopka pointed out above.

[oskarwrobel]

When CKE5 is displayed inside the modal then its default z-index should be the modal z-index + 1. CKE5 z-index stack should start above the modal.

[ghost]

I think @oskarwrobel is right. I don't have to write my own code. Am I right, @Reinmar?

[dkonopka]

My solution wasn't wrong, but as @oskarwrobel said:

:root {
  /* Because maximum bootstrap z-index is 1070. */
   --ck-z-default: 1071
}

is more "bulletproof".

[oskarwrobel]

When CKE5 is in the modal and z-index of this modal is 500, then CKE5 default z-index should be set as 501 and it has to be done on the integration side.

[Reinmar]

What if some other framework sets their z-index to 9999?

What about parts of other websites' UIs which should be displayed over the editor? What if a Bootstrap modal should never be covered by CKEditor 5's panel. Now we're talking about displaying CKEditor 5 in a Bootstrap modal, but what if Bootstrap modal is used as a part of CKEditor 5's UI and will suddenly hide beneath it?

So, sure, we can bump the default. Bootstrap is a popular framework and in most cases, it will be CKE5 used inside Bootstrap's modal, so perhaps it makes sense. But it's not the last time we'll be asked about this. You can also break existing integrations when changing the default (e.g. our docs). So just take this into consideration when making a decision.

[dkonopka]

☝️ Agree, if we set the biggest possible value it will start z-index war between CKE5 and other frameworks.

To sum up, I would choose the minimum working solution for bootstrap 4 where ck-z-default is 100.

[oskarwrobel]

Guys, I would not change anything here. We introduced relative z-index to make the integration easy. It's the developer responsibility to set a proper default z-index for CKE5. When the editor is placed on the modal then the default z-index should be increased to be the same as the modal one. Only the person who integrates the editor knows the proper value.

[Reinmar]

To make it clear – I'm ok with doing nothing and I'm ok with changing the z-index to make it work with the most popular libraries out there (although, perhaps we should check them). That's why I reopened the ticket – so it can be discussed.

BTW, there are also other types of issues when integrating CKEditor 5 into some CSS frameworks (https://github.com/ckeditor/ckeditor5/issues/1147). Those things need to be done on the integration part, so we kinda need a guide (or clean answers on SO) anyway.

[oskarwrobel]

To sum up, I would choose the minimum working solution for bootstrap 4 where ck-z-default is 100.

What if we introduce something in our UI with z-index 200? It will land under the modal.

What about parts of other websites' UIs which should be displayed over the editor? What if a Bootstrap modal should never be covered by CKEditor 5's panel. Now we're talking about displaying CKEditor 5 in a Bootstrap modal, but what if Bootstrap modal is used as a part of CKEditor 5's UI and will suddenly hide beneath it?

We have a set of variables, everything can be controlled separately to fit the integration.

[Reinmar]

I wrote such a section about Bootstrap integration. Do we need to do anything else?

---

Compatibility with Bootstrap

In order to display CKEditor 5 inside Bootstrap modals you need to configure two things:

• The z-index of CKEditor 5's floating balloons so they are displayed above the Bootstrap's overlay.
• Configure Bootstrap to not steal focus from CKEditor 5 fields.

The above can be ensured by adding this CSS:

/*
    We need to add this CSS custom property to the body instead of :root,
    because of CSS specificity.
*/
body {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

/*
    Override Bootstrap's CSS.
    Note: this won't be necessary once the following issue is fixed and released:
    https://github.com/ckeditor/ckeditor5-theme-lark/issues/189
*/
.ck.ck-button {
    -webkit-appearance: none;
}

And passing the focus: false option to Boostrap's modal() function:

$( '#modal-container' ).modal( {
    focus: false
} );

Check out the demo on https://codepen.io/k0n0pka/pen/yqBXOz.

[Reinmar]

I see that @oskarwrobel agrees (https://github.com/ckeditor/ckeditor5/issues/1142#issuecomment-404084316), so I'm closing this.

[oskarwrobel]

Now I see that --ck-z-default does not make sense. I thought css variables works a bit different. I assumed that it's enough to define:

:root {
  --ck-z-default: 1;
  --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

and then we will be able to change everything only by changing --ck-z-default

body.bootstrap-modal {
  --ck-z-default: 1051; /* Bootstrap modal + 1 */
}

and --ck-z-modal used inside body.bootstrap-modal will be calculated as 1051 + 999.

But we need to override all:

body.bootstrap-modal {
  --ck-z-default: 1051; /* Bootstrap modal + 1 */

  /* We need this line otherwise value of --ck-z-modal
  won't change and will be still calculated as 1 + 999 */
  --ck-z-modal: calc( var(--ck-z-default) + 999 ); 
}

[edgarsn]

I wrote such a section about Bootstrap integration. Do we need to do anything else?

Compatibility with Bootstrap

In order to display CKEditor 5 inside Bootstrap modals you need to configure two things:

• The z-index of CKEditor 5's floating balloons so they are displayed above the Bootstrap's overlay.
• Configure Bootstrap to not steal focus from CKEditor 5 fields.

The above can be ensured by adding this CSS:

/*
  We need to add this CSS custom property to the body instead of :root,
  because of CSS specificity.
*/
body {
  --ck-z-default: 100;
  --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

/*
  Override Bootstrap's CSS.
  Note: this won't be necessary once the following issue is fixed and released:
  https://github.com/ckeditor/ckeditor5-theme-lark/issues/189
*/
.ck.ck-button {
  -webkit-appearance: none;
}

And passing the focus: false option to Boostrap's modal() function:

$( '#modal-container' ).modal( {
  focus: false
} );

Check out the demo on https://codepen.io/k0n0pka/pen/yqBXOz.

This worked for me. If you're using bootstrap-vue, then you should add no-enforce-focus to <b-modal>