Am I missing some property or setting? When a row in a table is selected why wouldn’t it be highlighted by default?
Hi George! The selected rows should be highlighted like this:
Are you using a setting in the initial selected index of table option? If that was an invalid value it would stay unselected.
Interesting. I didn’t see a highlighted row in your image example until I adjusted my Accessibilty / Display / Contrast setting to Normal. No very far up the scale to Maximum, maybe 20% it completely becomes white. I tried to make a recording of it but it looks fine if you have it set to Normal.
Please do me a favor, to prove to you that I’m not crazy, and try to raise your contrast as shown in this video if you have a Macbook. https://i.gyazo.com/ac2d0e4a5066335376020d0153a1a506.mp4
May I humbly suggest that you allow the developer to set the highlight color to accommodate the special needs of visually challenged individuals like myself.
Thank you for the video! Yes this makes sense and I see the same thing on my own displays.
We should absolutely work on some built in accessibility options since everyone's needs can be different for issues like this. Right now, I can offer you these fixes with CSS:
In a single app, if you add this text to a text component, and set it to render as HTML:
<style>
.table-row.selected {
background-color: blue!important;
color:white;
}
</style>
You'll get this result on all of your tables selected rows:
You can also apply that organization wide in the preloaded CSS like this (without the style tags):
To have these settings applied globally to all of your retool apps. The background-color and color styles will work with any of these colors or any hex codes so the flexibility is pretty wide!
Thanks for that tip. Really appreciate it.
Best Regards,
George
Is there any reference you can point me to that has all of the properties like
“.table-row.selected” for your various components?
At a high level, all components have a class name that starts with _retool-componentname, like _retool-textinput. There's a bit of a guide here, but honestly the best resource is your browser's developer tools since the specific selector you need could get quite nested. This is all based on CSS selectors and I'm not an expert on the topic, but here's an outline of how I went about finding this.
This workflow is for chrome specifically, but all major browsers should support something similar. We can start is by right clicking the area of the page I want to find the selector for, and selecting inspect:
That brings up the chrome dev tools Elements section with the specific class the mouse was above expanded:
Here we can see that inside of the _retool-table1 class, there are many nested layers that go down to the specific cell that I originally right clicked on to inspect. As we mouse over different items in this view it will highlight the matching elements on the page:
The table rows for all table components are all of the class rt-tr, so styling .rt-tr would affect every row anywhere in the app (or everywhere if that was used in preloaded css)
If we add the ._retool-table1 on this, we can target the rows of just the table1 component:
I also noticed that the selected row has an additional selected class here, so we can add that to only affect the rows in table1 which are selected:
3 Likes
Thank you very much for the comprehensive reply. This will help me very much.
1 Like