RichText inside Link: Avoid color and underlined text

Anvil Q&A
1

Links are very useful as containers since they allow me to register click on elements (like a RichText component). But I have a small problem: When a RichText component is used inside a container, the text changes color and it becomes underlined when hovering over with the mouse.

Here is an example:
https://anvil.works/build#clone:IXVRHAHOAEPD6KFE=MLEDMC6FI7GD4GXFTWXWGK3B

In many cases, this is probably not the desired behaviour, and I did not find an easy way to turn it off.

It would probably involve creating a new role with css styling for the link container? While this might be easy enough, I wonder if using links in this way is so common that one might benefit from a built in role option for this. Or perhaps it already exists and I am just too dumb to find it?

1 Like
2

Here is an inelegant solution using my limited css skills:

  1. In Assets, edit themes.css to include the following text

.anvil-role-disable_hover:hover {
text-decoration: none;
color: inherit;
}

  1. Add disable_hover to Roles

  2. Set the role of the links where you do not want the hover (underlined text) to appear to be disable_hover

(You might also want to set the text color to be the color your want using the foreground attribute)

Not very elegant, and augment in anvil extra might be better if you want to register clicks on containers, but it seems to work …

1 Like