css.md 3.7 KB


menu-title: CSS Frameworks category: builds-integration-frameworks

order: 50

Compatibility with CSS 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).

Compatibility with Bootstrap

In order to display CKEditor 5 inside Bootstrap modals you need to proceed as follows:

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

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.

Compatibility with Foundation

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.

Compatibility with Materialize

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.

Compatibility with Semantic-UI

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