6

I'm using primefaces' accordion panel. Inside the tabs i have forms which are created programmatically. Each form has a submit button. Now I wanted to change the colour of a tab, if the form of this tab has been submitted. So is it possible to change the color of one specific tab and how could I manage to make this work?

I think i have to use different style classes as mentioned here but I'm not quite sure how to use them.

How to highlight a primefaces tree node from backing bean

Any help is appreciated

Community
  • 1
  • 1
Nikolaus Hartlieb
  • 339
  • 1
  • 5
  • 17

2 Answers2

12

You can use the titleStyleClass of the <p:tab> tag for this. E.g.

<p:accordionPanel>
    <p:tab title="Step 1" titleStyleClass="#{bean.step1Completed ? 'completed' : ''}">
        ...
    </p:tab>
    <p:tab title="Step 2" titleStyleClass="#{bean.step2Completed ? 'completed' : ''}">
        ...
    </p:tab>
    <p:tab title="Step 3" titleStyleClass="#{bean.step3Completed ? 'completed' : ''}">
        ...
    </p:tab>
</p:accordionPanel>

This will set the CSS style class of the tab to completed whenever the condition returns true. You can just specify the desired CSS in the .completed {} style class in your own style.css file which you put in /resources folder and include by <h:outputStylesheet name="style.css">.

.completed {
    background: pink;
}
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • I tried this but not working. firebug shows that the class is overridden by PF classes. I'm using PF 5.2.. any idea? –  Jul 15 '15 at 23:43
  • Thanks @BalusC, this works well with `background`'s attribute, but not with `color`'s one, why ? – Omar May 30 '16 at 20:20
-1

Perfect answer from @BalusC! Plus if it's not working for you just add !important; in css. 

.completed {
background: red !important;
}
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Wanderson Xesquevixos de Sique
  • 1,043
  • 8
  • 10