Change Text Color

Hi there,

anyone knows how to change the text color of a text component if a condition it’s true?
For example. I have a math field. I want to put the text color in green if it’s a greater than 0 value and red color if its less than 0.

thanks

If you use a Rich Text component, then it’s easy enough.

You could have something like: <span style="color: {color};">, and then use an if-then-else column to substitute the appropriate color code.

5 Likes

Or you could use a Hint component?

1 Like

You could, but the hint component only gives you the 4 “mood” options - you can’t use rich text in a hint component. I guess you could use CSS in a rich text component to over ride the hint component styling, but that would be a very convoluted way of doing things if all you wanted was different color text :wink:

3 Likes

Yes, that’s true of course but Hints are visually more explicit of the ‘problem’, whereas colouring text isn’t always intuitive for the end user.

3 Likes

I tried this.
where color is a column of the table and Margen idle and didn’t works.
some blue text {Margen}
How can I reference a table field inside a html tag in a Rich Text component?

thanks

Create a template column, and use this column as the source for the Rich Text component.

So using my example, it might look like:

In your case, instead of hard coding a color code as a replacement, you’ll probably want to use an if-then-else column that outputs the appropriate color code.

3 Likes

Thanks, it works!!!

1 Like

It works too.

Thanks

1 Like

Hi @Juanma_Lobato :wave:t2:

You could

  • use a hint text component as suggested by @garrison,
  • use another text component such as rich text and change font size and weight,
  • with a template column add an emoji or symbol before or after the text you wish to highlight.
3 Likes