Is there a way to remove the padding from the mention?

Ask us anything
1

I’m trying to remove the padding from the mention bubble in the Rich Text input

There is no such option to be configured in the input options of the Rich Text Input Element

But there is an attribute when using Chrome inspect tool:

image

It works when I manually change this padding to .1rem .0rem
But, when I try some css codes in Custom CSS field of Rich Text Input, it doesn`t
like:

.mention {
    padding: 0.1rem 0rem !important;
}

and

.ww-rich-text .ProseMirror .mention {
    padding: .1rem 0rem !important;
}

and

<style>
    .ww-rich-text .ProseMirror .mention {
        padding: .1rem 0rem !important;
    }
</style>

Any solution to that?

2

Hi @pedro!

You’re on the right track! However, please note that the CustomCSS field is only for adding styles to the main element. It can’t be used to style sub-elements, which is why your selectors might disappear from the field after refreshing the page or deselecting and reselecting the element.

To achieve what you want, you should either add the custom CSS to the head of the specific page or, if it’s something you’ll use across multiple pages, to the site-wide CSS.

To add the code to a single page, simply select the page from the dropdown menu, click the gear icon, then click on “Custom Code” and add your CSS to the head section.

To apply this rule site-wide, go to the top bar, click “More” (right next to Copilot), then click “Custom Code” and add the CSS to the head.

Here’s the exact code you should add:

<style>
.ww-rich-text .ProseMirror .mention {
    padding: 0.1em 0;
}
</style>

Please note that these changes will only be visible on the published site, not in the editor.

Hope this helps!

1 Like