Is it possible to create a custom Role for RichText components, and if so, what is an example of the CSS to do this? I’d like to create a version of RichText that is similar to the Label components “text” role.
I’m not sure if this will do what you want, but maybe a start:
You can also go to theme.css under “Assets” and search on “role-text.” See: https://anvil.works/docs/client/themes-and-styling#customising-the-theme
That was actually the first thing I’ve tried. Unfortunately, it doesn’t affect the rich text div?
I think you need to also add something to theme.css, but I can’t help you there.
So this seems to work when added to the .css:
.anvil-role-richtext-text {
padding: 0;
}
Then add the Role
Not sure yet if it will affect anything else, but hopefully not!
3 Likes
If your RichText component is using markdown then that will render as various html elements on the page.
The highlighted image is a p element rendered inside the RichText component.
Globally there is a p css style you need to override.
As a very simple fix you could do something like:
.anvil-role-richtext-text > * {
padding: 0;
margin: 0;
}
that’ll work for your specific example and it will also apply to all top level elements rendered inside the RichText component.
You can also target specific html elements within the RichText component e.g.
.anvil-role-richtext-text p {
margin: 0;
}
4 Likes
Fantastic, thank you, Stu!
Hi Stu,
the solution is not working in my case, I do not get rid of this bottom margin?
Any other solution to get a Rich Text in a 1-Line-Text Label (max. 4 Character).
BR
Gerhard
Also make sure you’ve set the spacing_above and spacing_below properties to ‘none’.
1 Like
Hi Stu,
not working the solution, I do not found as well any code in the CSS relaying to p or ritchtext?
.anvil-role-richtext-text > * {
margin: 0;
padding: 0;
spacing_below: ‘none’;
spacing_above: ‘none’;
}
Sorry I meant the properties in the designer for the rich_text_component.
You’ll want to set them to none rather than small.
Hi Stu,
I had them at none, however i do not like to decrease the spacing to a next component but the rich text field should be without margin or padding to a text with 12 px. (Text Field Hight)
Ist there a role to apply to the text field a rich-text-expression, nedded for writing matematical expressions like ETA or SUM. ∑, Delta ∆ (Greek Symbols).
BR
Gerhard
@Gerhard best to move the off topic part of the above post to a new thread.
If you’re still having problems with the spacing/margin of the rich text component I think you’ll need to post a clone link so that we can see what’s going on and what’s not working.
Posting a minimal example that demonstrates the issue your facing is best.