Perspective table selected row style not being applied as expected

Ignition
1

I have a perspective table where row selection is enabled, and when I select a row it’s highlighted in a blue colour. I’d like to change that colour (and the text colour). I have located the table’s selection.style properties, but it seems that most of them are ignored. If I set a backgroundColor it fills the entire row with that colour, and blocks the text. Changing the text colour doesn’t seem to do anything at all. I do have style classes applied to the rows.style, but even if I remove them, it doesn’t seem to honour the selection style classes on the selected row. Am I missing something simple, or should this be working as I expect?

2

Just bumping this question - any ideas on what I might be missing?

3

Hey ASF,

I was able to quickly recreate this in one of my local projects, and I found modifying the HEX code for the background colour to also include transparency seems to solve it?

1 Like
4

You can try adding this into your advanced stylesheet;

.ia_tableComponent__body__row--hovered {
    color: #wanted_color;
    background-color: #wanted_color;
}
1 Like
5

Thanks, that adjusts the hovered row, but not the selected row. Do you know the correct reference for the selected row, or where I can find these details? I tried row--selectedbut that doesn’t appear to be it

6

Ah, my apologies - I misread your question. For selected row you’d want something like this in your Advanced Stylesheet;

.ia_tableComponent__selection {

background-color: #wanted_color;

}

You can also add whichever style you prefer for your selected row - border, color, box shadow etc.

7

Thanks! That modifies the selected row style, but again seems to do it the same way as the built-in selection style properties. If I add a background colour, it fills the whole row with that colour and covers the text. Changing the text colour has no effect at all. @Jasmine_Quick‘s suggestion to add transparency kind of works, in that it makes the “background colour” transparent and I can then see the text behind it, but that doesn’t really give me a proper solution, and anyway, the text colour still isn’t being applied.

So it seems that whichever way I try to apply the row style to selected rows, the “background” colour is not placed in the background, and the text style is ignored. Presumably this is not the intended behaviour; perhaps I should file a bug report

8

Here’s the official css code for the selection in a table component;

.ia_tableComponent__selection {
    background-color: rgba(12, 123, 179, 0.25);
}

It appears that the table component’s selected property is hardcoded with 25% opacity settings. If I set the opacity to 100% then the background text isn’t visible anymore. I think Jasmine’s suggestion of setting a custom color with a low enough opacity is the way to go? I’m not sure if this is the intended outcome from IA’s side, but I haven’t been able to find another workaround as of yet.

1 Like
9

To change the text colour, its the “color” style value.

So to change the background and the text, you would need to give both backgroundColor and color the desired values.

To easily access the colour picker for these, you can type in any value in either HEX or as “red”/”blue” for example, and then click on the colour square that will appear next to it. At the bottom of the colour picker is also the transparency value, so you can assign it there.