Problem with Rich faces panelBar ?

Question

I am using rich faces panel bar control in my application. There some problem with the control.

The code is some thing like this

<rich:panelBar contentClass="some-class">
    <rich:panelBarItem label="Panel 1" headerClass="some-css-class">
     Contents 1
    </rich:panelBarItem>
    <rich:panelBarItem label="Panel 2" headerClass="some-css-class">
     Contents 2
    </rich:panelBarItem>
    <rich:panelBarItem label="Panel 3" headerClass="some-css-class">
     Contents 3
    </rich:panelBarItem>
</rich:panelBar>

Now I wan't to show header background color of active panel item green and all other should be blue. I tried it using 'headerClassActive' property of the panel bar but is not working.

Is there any thing missing.

Answer 1

In your css file define the .rich-panelbar-header-act class and override with your specifics.

e.g .rich-panelbar-header-act{ background-color: blue; }

Answer 2

So after many try I got the solution. I don't know why this is done using "headerStyleActive" but it is working.

 <rich:panelBar contentClass="some-class">
    <rich:panelBarItem label="Panel 1" headerClass="some-css-class" headerStyleActive="background-color:green;">
        Contents 1
    </rich:panelBarItem>
    <rich:panelBarItem label="Panel 2" headerClass="some-css-class" headerStyleActive="background-color:green;">
        Contents 2
    </rich:panelBarItem>
    <rich:panelBarItem label="Panel 3" headerClass="some-css-class" headerStyleActive="background-color:green;">
        Contents 3
    </rich:panelBarItem>
</rich:panelBar>

All I did is used headerStyleActive property of rich:panelBarItem and not headerClassActive. This is working code .

I got this solution from this page.