Styling the Bubble Rich Text Editor - Please halp

I am doing a major renovation to my app where I have 37,000 user messages, which have largely all been written to the database using the ZeroQode RTE - which means they are HTML.

I’m switching to the bubble RTE for reasons un-related.

Anyhoo… My chat widget has two instances of the RTE - one where the user types their message and hits “Send”

And the second to display the message properly (since the old messages are HTML, this is necessary, I can’t use a text element)

I would like to remove the padding that comes natively with the bubble RTE.

I have tried doing it using the advice in this thread: Rich Text Input font size - #2 by donaldndim160

Which advises using an HTML element with this Css:

.ql-editor { padding:0px!important; font-size: 14px !important; font-family: 'Inter'!important; }

This works - but it changes the padding for both RTE elements, not just the “display” ones.

I thought that “.ql-editor” was the ID attribute of the RTE - but I think it is actually pointing at some unseen quality of the Bubble RTE itself so that it affects all RTE’s on the page.

Any advice? Thank you so much.

I found the solution - Using ChatGPT by the way.

ChatGPT figured out that bubble is built on the Quill library which uses .ql-editor as a css class which is why it was affecting all RTE elements on the page.

It suggested modifying the code to specify the RTE based on an ID attribute

#RTEDisplay .ql-editor {
padding: 20px !important;
“RTEDisplay” is by ID attribute - you’ll want to change that.

The # is not part of the ID attribute, it’s part of the CSS so include it.