Skip to content

Commit

Permalink
Merge pull request #1533 from ckeditor/t/ckeditor5-table/154
Browse files Browse the repository at this point in the history
Docs: Extended the Bootstrap integration guide with style overrides for tables. Closes ckeditor/ckeditor5-table#154.
  • Loading branch information
oleq authored Feb 15, 2019
2 parents c8e5e98 + 3510020 commit bcc8642
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions docs/builds/guides/frameworks/css.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ In this guide, you will learn how to address these integration issues and use th

## Compatibility with Bootstrap

### Bootstrap modals

We noticed that [Bootstrap](https://getbootstrap.com) modals cover the UI of the rich-text editor and break the input fields. Knowing that, you will need to take the following steps to get CKEditor 5 working in the Bootstrap environment:

* Configure the `z-index` of the floating editor UI (e.g. balloons) so it is displayed over the Bootstrap overlay.
Expand Down Expand Up @@ -43,6 +45,20 @@ $( '#modal-container' ).modal( {

[Check out the demo of CKEditor 5 rich-text editor working correctly with Bootstrap](https://codepen.io/ckeditor/pen/vzvgOe).

### Bootstrap table styles

There is also a known [issue](https://github.com/ckeditor/ckeditor5-table/issues/154) concerning table styles brought by Bootstrap breaking the table (widget) layout during editing. If you do not want additional space around edited tables when using Bootstrap, add the following styles to your application:

```css
/*
* Override the width of table set by Bootstrap content styles.
* See: https://github.com/ckeditor/ckeditor5-table/issues/154.
*/
.ck-content .table {
width: auto;
}
```

## Compatibility with Foundation

CKEditor 5 requires some minor adjustments to the `z-index` of the UI to work properly with [Foundation](https://foundation.zurb.com/sites.html) (and with the [Reveal](https://foundation.zurb.com/sites/docs/reveal.html) modal, too).
Expand Down

0 comments on commit bcc8642

Please sign in to comment.