Table Selection with a Link in the Row

I’m using Chameleon-Blue Theme and it uses Blue to show that a row is selected. This is good and looks nice but unfortunately my Link’s text is blue also.

So whenever the row is selected, I can’t read the Link’s text because it blends in.

My Work around is to keep track of the rows selected and in the ValueChangeListener I make my Link’s text White. And when ever it is unselected I remove the White Style off that link. This works, causes a little flicker, but works.

My question is: Is there a cleaner way to do this with CSS only for Link’s? My Label’s are able to change their text to White and Back no problem.

Thanks!
Dana

Try something like:


.v-table tr .v-table-cell-content a{
 color:blue; /* color of the link on unselected rows */
}

.v-table tr.v-selected .v-table-cell-content a{
 color:white; /* color of the link on selected rows */
}

You may also need to set a:hover (mouse hover a link) and a:visited (link which has already been clicked on)

Thanks Mathias,

I couldn’t get to work what you suggested, but you got me thinking… I was able to add a style “tablelink” to my Link and use:

/* Change the link to White when selected in a table row */
.v-table tr.v-selected .v-link-tablelink,
.v-table tr.v-selected .v-link-tablelink:focus,
.v-table tr.v-selected .v-link-tablelink:active,
.v-table tr.v-selected .v-link-tablelink span,
.v-table tr.v-selected .v-disabled.v-link-tablelink,
.v-table tr.v-selected .v-disabled.v-link-tablelink:focus,
.v-table tr.v-selected .v-disabled.v-link-tablelink span {
color:rgb(249,249,249);
}

Didn’t have to do anything when the row is not selected.

It works and much much cleaner than the way I did have it.

Thanks!
Dana