Hi,
I'd like to change the row text color when I click on row. I am using the Table object on Perspective.
I am being able to change the rows background color, but so far I do not know how to change the text color. The background color is "covering" all the text on the row.
Under "Selection - Style" I configured the background color, and this one is working properly with every selected row, the color changes accordingly. I set a text color under this same property, and it is not working.
What I am missing?
Thanks.
The correct property to use to change the value of text color is just "color." Here's a basic demonstration of configuring this:
I think you may be misunderstanding the question (or maybe I am)... OP is asking how to change the text color for the selected row. So you would place this in props.selection.style presumably, but as I'm testing this, I can confirm that it doesn't work like it should.
For instance, if I set the selected row background color in props.selection.style, it will apply to my row:
However, when I do the same for the text color, it doesn't have an effect on the selected row! When I explore this in the DOM, it looks like the text isn't shown because there is a z-index: 10 property set on the selected row, so the text is behind the background color you set, but the text color still isn't being applied to the text in the cells of the selected row.
I believe this is a bug and I could've sworn this used to work earlier.
I could not get this work either (background color worked, text color did not).
One work around would be in your onClick handler for the table, set the style for the row in a JSON data set used as the prop.data for the table:
Not ideal as you would have to set/unset it ... but it would work.
HTH.
-Shane
Thank you for your answers.
That's right, I'd like to change the text color for the selected row.
Thank you for the suggestion to use JSON data. But how can I do it? Thanks.
It seems applying the color to the .content div instead of the one targeted by the selected styles works.
So, once again, dirty css tricks can save the day ! All we need to do is target the .content div that follows the one with .t-selected:
The target here is .t-selected + .content.
But let's make it a bit more specific than that, and inject some color.
- create a new style class. It must not be in a folder (Somehow I was never able to inject things from classes in a folder, so my styles root is only for css injection)
- I called mine 'highlight_test', call it whatever you like.
- in the
background imagefield, put this line:} .psc-highlight_test + .content {color: red;} { - replace
highlight_testwith your class name (leavepsc-here), andredwith the color you want. - add the style class to the
selection.style.classesproperty of your table - wait for IA to fix this weird behavior so you can delete this hack and style your selection properly.
2 Likes
Thank you for the explanation.
Now I am able change the text color. But if a background color is applied, it just paints the whole row, including the text. I don't know if there would be a workaround for this.
There's always a workaround !
(use the solution in the edit)
You can add this to property: z-index: 0 !important; to the div that gets your style class, so:
} .psc-highlight_test + .content {color: red;} .psc-highlight_test {z-index: 0 !important;} {
Note: the first selector targets an element that has the class .content immediately following an element that has the class .psc-highlight_test. The second one directly targets the element with the class .psc-highlight_test.
edit:
Actually, it might be better to increase the z-index of the content itself, so...
} .psc-highlight_test + .content {color: red; z-index: 10;} { is enough to bring the text back to the front.
1 Like
Thank you very much for your help. It worked now.
Thanks again.