How to make ratings read only

🤝 Discussion
1

Is there a way to make ratings read only? At present on mouseover the rating changes but I'd like it to be read only.

Thanks

1 Like
2

I don't believe there is a way to do this currently AFAIK. Maybe a Feature Request?

3

Hey @DavidS!

Just to be sure, have you toggled the "Editable column" setting off?

Are you referring particularly to the empty stars that are displayed with a rating?

If so, you might try the following custom CSS to remove it:

[aria-disabled="true"] ._d4YMI:not(._2yN1j) svg{
  display: none;
}

4

Hi @ScottR I think you're right, I'll add one

@Kabirdas In tables it works as expcted: I can set it to non editable and then moving the mouse over the stars doesn't cause the stars to highlight / unhighlight. However I'd like to do this using the standalone rating component outside of a table, which doesn't have a read only mode. Is ther a CSS trick to achieve this?

Jan-06-2023 11-31-49

5

Ahh I see, in that case, you might try setting "Disabled" to true and then using the following CSS to disable the greyscale filter:

._retool-rating1 ._sTeHJ{
  filter: none;
}

Does that work?

The CSS solution should only be a temporary one! We can let you know here when a built-in read only mode is supported for the rating component :slightly_smiling_face:

6

Hi Kabirdas - I have tried this solution but still get the grayscale filter. Any other suggestions?

7

Hi @Richard_Fletcher,

Thanks for reaching out :thinking: The css class names can change over time (without warning), so custom css solutions need to be updated to match the new class names as they change.

That said, I haven't been able to find a good solution with the new css classes :disappointed: I will bump the feature request for a read only setting internally :crossed_fingers:. This post shows how to use the browser tools to find the css class & implement custom css, in case you have better luck than me!

8

This seems to work for the time being :crossed_fingers: