0

I am changing the pageblocktable cell colors dynamically based on value but due to salesforce standard style on pageblocktable removing my color.

please suggest.

it is changing on mousover

enter image description here

  • 1
    You should really include your markup. – Adrian Larson Oct 19 '16 at 16:46
  • @andran sorry i didn't get you – lokesh kumar Oct 19 '16 at 16:51
  • @lokeshkumar post your vf page code – sfdc Oct 19 '16 at 18:01
0

This really depends on your Visualforce code and what you're checking against. For each column you can use a formula to determine whether or not a class gets used. For example:

<style>
  .green {
    background: green;
  }
</style>

<apex:pageBlock>
  <apex:pageBlockTable value="{!myTable}" var="t">
    <apex:column styleClass={!IF(t.DateField__c > TODAY()), 'green', '')}     value="{!t.DateField__c}" />
  </apex:pageBlockTable>
</apex:pageBlock>

You've not specified much, but the trick is here:

{!IF(t.DateField__c > TODAY), 'green', '')}

In other words for this example, if DateField__c is greater than today, return green. green is a CSS class and the formula is within the styleClass parameter. So, if the date is indeed greater than today, it'll render something like this:

<apex:column styleClass="green" [...]

Edit

To answer your second question, in your CSS you'd need something like this:

.green:hover {
    colour: darkgreen;
}

Salesforce will have some standard styling and :hover will be one of them. You'll want to override/cascade over that by using your own class.

Alternatively, you could do:

.green {
  background: green !important;
}

Although I'd avoid using this personally.

| improve this answer | |
  • this thing i am getting but when i hover on the row it is disappearing bcoz salesforce pagetable standard class highlight - how do i remove that standard hover – lokesh kumar Oct 19 '16 at 16:54
  • @lokeshkumar See my edit. – Dan Jones Oct 19 '16 at 16:57
  • 1
    sorry to say but it's not working – lokesh kumar Oct 19 '16 at 17:02
  • Strange because I have exactly that in the styleClass in one of the first VF Applications I ever made, although I had admittedly used !important. – Dan Jones Oct 20 '16 at 7:46
0

The background hover is a feature of pageBlockTable. If you want to remove it entirely, use dataTable instead. You'll also lose the formatting, including borders, colors, etc that salesforce uses by default.

If you just want to keep the green color, wrap your text in an inner element:

<apex:column headerValue="Column Name">
    <span style="display: inline-block; width: 100%; background-color: {!row.bgcolor}">
        {!row.dateValue}
    </span>
</apex:column>

Feel free to adjust as you need to.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.