Styling the Bubble Rich Text Editor - Please halp

Questions
1

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.

image
image1920×945 122 KB

2

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.

1 Like