Trix: Bulma.css - clashing styles?

[mattkoch614]

When using the Bulma CSS library, the trix-editor and toolbar are garbled. This appears to be due to the styles clashing with one another.

Steps to Reproduce

1. Create a new HTML document.
2. Include trix.js and trix.css
3. Include bulma.css

JSFiddle: https://jsfiddle.net/2mthwvfn/

Details

• Trix version: 0.10.1
• Bulma version: 0.4.0
• Browser name and version: Google Chrome Version 56.0.2924.87 (64-bit)
• Operating system: MacOS

[javan]

The problem is this .icon style from Bulma: https://github.com/jgthms/bulma/blob/master/sass/elements/icon.sass#L3

You can fix it in your app by ensuring that style isn't applied to Trix buttons:

trix-toolbar .button_group button.icon, 
trix-toolbar .button_group input[type=button].icon {
  display: initial;
}

Demo: https://jsfiddle.net/javan/otm0ns6x/

[mattkoch614]

Thanks @javan. Did you notice also in your demo, some of the toolbar buttons don't apply any styling? From what I can see, the Title, Quote, Bullet and Numbers buttons have no effect. Pretty sure this also has to do with the fact that Bulma is applying styles to the elements inside of the trix editor.

[javan]

Trix is generating the correct HTML (<h1>, <blockquote>, etc.) and bulma is resetting them to appear unstyled. You'll need to decide how to handle that in your app.

[mattkoch614]

Thanks, understood. I'll ponder how to deal with this.

[npresco]

For anyone running into this issue, if you wrap the rich_text_area in a class="content" it will correctly display the title, quote, bullets content.

[seanmsmith23]

Thank you @npresco been trying to figure this out.