menu-title: CSS Frameworks category: builds-integration-frameworks
Some of popular CSS Frameworks uses stronger CSS Specificity of their components that's why sometimes it can overrides CKEditor 5 elements like floating balloons (e.g. URL input).
In order to display CKEditor 5 inside Bootstrap modals you need to proceed as follows:
z-index of CKEditor 5 floating balloons so they are displayed above the Bootstrap overlay.The above can be ensured by adding this CSS:
/* We need to handle floating elements inside modals to display them above Bootstrap components. */
:root {
--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999 );
}
And passing the focus: false option to Bootstrap's modal() function:
$( '#modal-container' ).modal( {
focus: false
} );
Check out the demo on https://codepen.io/ckeditor/pen/vzvgOe.
Currently, except z-index issue with Reveal component there are no obstacles to use CKEditor 5 with Foundation.
/* We need to handle floating elements inside modals to display them above Foundation components. */
:root {
--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999 );
}
Check out the demo on https://codepen.io/ckeditor/pen/VqXYQq.
If you want to play CKEditor 5 with Materialize.css modals then like in Bootstrap case you need to handle z-index issues. Additionally, at this moment we have found one issue related to the .ck-input appearance where Materialize overrides it.
Configuring modals, you need to handle stealing focus issue and pass dismissible: false option.
M.Modal.init( modal, { dismissible: false } );
// or jQuery way
$( '#modal-container' ).modal( {
dismissible: false
} );
/* We need to handle floating elements inside modals to display them above Materialize components. */
:root {
--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999 );
}
/* We need to overwrite default input design in materialize.css.
* See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/forms/_input-fields.scss#L10-L40
*/
.ck input.ck-input.ck-input-text {
box-shadow: var(--ck-inner-shadow),0 0;
background: var(--ck-color-input-background);
border: 1px solid var(--ck-color-input-border);
padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
transition-property: box-shadow,border;
transition: .2s ease-in-out;
height: inherit;
width: inherit;
font-size: inherit;
margin: 0;
box-sizing: border-box;
}
.ck input.ck-input.ck-input-text:focus {
border: var(--ck-focus-ring);
box-shadow: var(--ck-focus-outer-shadow),var(--ck-inner-shadow);
}
Check out the demo on https://codepen.io/ckeditor/pen/gZebwy.
CKEditor 5 also works properly with Semantic-UI. To place balloon build of CKEditor 5 inside modal then like in other CSS Frameworks it is necessary to make bigger z-index than default modal element:
/* We need to handle floating elements inside modals to display them above Materialize components. */
:root {
--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999 );
}
Check out the demo on https://codepen.io/ckeditor/pen/OrZBpV