I am displaying a PageBlockTable with 12 records from a Custom object. And each <apex:column>
has its own color code rendered based on the value.
<apex:column headerValue="Field One" width="4%"
styleClass="{!CASE(a.Field1__c, 'Red', 'red', 'Green', 'green', 'Yellow', 'yellow', 'white')}">
<apex:outputText >{!a.Field1__c}</apex:outputText>
</apex:column>
But, when my mouse pointer hover on any of the rows, it disables all the colors and show a plain white row. But, I want the row to stay how it rendered(different color codes to each table data). Is there any Boolean
variable I need to make false
or other attributes to add/change?
Best Answer
You can't "disable" it, but apparently you can countermand it. I've come up with two potential solutions.
!important
Use an important style.
This will override the Salesforce style sheet.
Toggle "highlight"
You can also remove the class as its added:
onRowMouseOver
is called after the library does its stuff, and so you'll undo the highlight that it does. There's no noticeable flicker because browsers delay rendering until the end of a JavaScript execution cycle.