user5281896 user5281896 - 1 year ago 360
CSS Question

Primefaces Accordion Panel background color not working

Here is my Accordion Panel tab

<p:accordionPanel class="abc" value="#{ac.ab.listAn}" var="avar">
<p:tab titleStyle="color:#ff8000" title="#{avar.title}">
<div style="white-space: pre-wrap; background-color:#ffffff">
<h:outputText value= "#{avar.detail}"/></div>

Here is the CSS content

.ui-accordion .ui-accordion-content abc {
background-color: #ffffff;

Because of the background color set to white in the div, the content does display with white background, but there is a thick border around it, which is actually the background color of the accordion panel.

The need is to change the accordion panel background completely to while. The class content doesn't seem to work. Please suggest.

Image Included


Just got a chance to further research on this and the following code did the trick

.ui-accordion .ui-accordion-content {
    background: #FFFFFF !important;

Nothing else is needed.