CODEWITHSUNDEEP
primefacesthemes
FERESSS
FERESSS

Reputation: 137

Condition color on datatable not working after adding theme

) I met a problem when using primefaces theme... I have a XHTML page contains a datatable with lines that are colored according to conditions., but after the integration of theme "trontastic" all is lost .. What I have to do! help me please this My code it doesn't show this style according to condition

<p:dataTable var="fab" value="#{composantbean.list}" 
   rowStyleClass="#{fab.statut eq 'Actif' ? 'a'  : (fab.statut eq 'Obsolete' ? 'o':(fab.statut eq 'En voi d obsolescence' ? 'e':(fab.statut eq 'Obsolete mais diponible' ? 'or':null)))}">

this is Style not accepting !!!

<h:head><style type="text/css">

.a
{
background-color: #00FF00 !important;
      font-weight: bold;
}
.o
{
background-color: #FF0000 !important;
      font-weight: bold;
}
.e
{
background-color: #FFFF00 !important;
      font-weight: bold;
}
.or
{
background-color: #FF9933 !important;
      font-weight: bold;
}
</style>

Upvotes: 0

Views: 1105

Answers (2)

Exterminator13
Exterminator13

Reputation: 2182

We have 2 problems here:

  1. Opening firebug we can see that background assigned to background css property, not background-color like it's done in primefaces example and your code. So, replace every background-color to background.
  2. We can notice highlight row colors lost after custom colors restored. To fix it, open firebug and find among CSS .ui-state-highlight and add important to, for afterwork theme it looks like:

.ui-state-highlight {

 background: linear-gradient(#FFFFFF, #CCEEFF)
 repeat scroll 0 0 rgba(0, 0, 0, 0) !important;

}

Upvotes: 1

Nick Hol
Nick Hol

Reputation: 312

Check your datatable elements with firebug or anything else depending on your browser. I assum primefaces themes append certain css classes to there components. If you want to edit the styles u need to make css class which are based on those.

by default the css class will be .ui-component

Try to edit your css classes to .ui-component .o and so on...

Remember .ui-component could be anything so check it using firebug in firefox or just the devloper tools (cntrl shift i ) in chrome to check the elements css class.

Upvotes: 1

Related Questions