Ckeditor5: CKeditor 5 and MaterializeCSS: no bullet lists in editor

Created on 3 Apr 2019  ยท  2Comments  ยท  Source: ckeditor/ckeditor5

๐Ÿž Bug report

๐Ÿ’ป CKeditor 5

Using CKEditor 5 and Materialize CSS does not work well. I'm using MaterializeCSS v1.0.
The CSS from the docs is applied but it looks like Materializecss is overriding all ul-li tags in the editor.

๐Ÿ“‹ Steps to reproduce

  1. go to https://codepen.io/ckeditor/pen/gZebwy
  2. add some text
  3. use bullet function

โœ… Expected result

See bullets

โŽ Actual result

No bullets

๐Ÿ“ƒ Other details that might be useful

docs

Most helpful comment

By default materialize CSS is overriding default <ul> and <li> appearance, see the source code.

We should add it to our documentation, but ATM this fix can help you.

.ck.ck-content ul,
.ck.ck-content ul li{
  list-style-type: inherit;
}

.ck.ck-content ul {
  /* Default user agent stylesheet, you can change it to your needs. */
  padding-left: 40px;
}

I've also updated a codepen demo.

All 2 comments

I can confirm that in our MaterializeCSS demo unordered lists miss styles. cc @dkonopka

By default materialize CSS is overriding default <ul> and <li> appearance, see the source code.

We should add it to our documentation, but ATM this fix can help you.

.ck.ck-content ul,
.ck.ck-content ul li{
  list-style-type: inherit;
}

.ck.ck-content ul {
  /* Default user agent stylesheet, you can change it to your needs. */
  padding-left: 40px;
}

I've also updated a codepen demo.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Reinmar picture Reinmar  ยท  3Comments

hybridpicker picture hybridpicker  ยท  3Comments

oleq picture oleq  ยท  3Comments

MansoorJafari picture MansoorJafari  ยท  3Comments

msamsel picture msamsel  ยท  3Comments