MaterializeCSS and Trix formatting

Question

I'm trying to use the Trix WYSIWYG editor on a MaterializeCSS page. Unfortunately the formatting doesn't work since MaterializeCSS overwrites HTML elements like UL with styles like "line-style-type: none". It does provide a style ".browser-default" to reset this but since the HTML elements in the content area are created dynamically I can't really use it.

This is an example snippet:

<trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
  <ul>
    <li>Test Item</li>
  </ul>
</trix-editor>

Would anyone know how to make this work and render the UL and LI inside the TRIX-EDITOR with a proper style?

Answer 1

You could override the style only for elements inside the <trix-editor> tag.

Example:

  <style>
    trix-editor ul:not(.browser-default)>li {
      list-style-type: disc;
      display: list-item;
    }

    trix-editor ul:not(.browser-default) {
      list-style-type: disc;
      display: block;
      padding-left: 40px;
    }

  </style>

  <trix-editor class="formatted_content" input="xx" contenteditable="" trix-id="1" toolbar="trix-toolbar-1">
    <ul>
      <li>Test Item</li>
    </ul>
  </trix-editor>


<ul class="browser-default">
  <li class="browser-default">Materialize Browser Default</li>
</ul>
<ul>
  <li>Materialize</li>
</ul>

See this jsfiddle for a demo:

https://jsfiddle.net/1jf9m2sp/