Transparent background-color in PrimeFaces panelGrid

css jsf primefaces background panelgrid
Rasshu picture Rasshu · Mar 28, 2014 · Viewed 17.6k times · Source

My panel grid in PrimeFaces has always a white background, but I couldn't find what must be changed, since I tried using a styleClass, modifying the CSS code of ui-panelgrid class, using the style tag inside p:panelGrid, p:row or p:column. Nothing worked.

Tried:

p:column style="background-color: transparent !important;"

or

.ui-panelgrid, .ui-panelgrid td { background-color: transparent !important; }

Screenshot:

panelGrid with white background inside div with gray background

Answer

Rasshu picture Rasshu · Mar 29, 2014

Thanks to a related question about removing p:panelGrid border, found out I need to override both td and tr. Background removed. Borders removed. :)

.noBorder tr,
.noBorder td { border: 0 !important; }

.transparentBackground tr,
.transparentBackground td { background: transparent !important; }

I created a custom class because the previous code did unwanted changes.

Related questions

How to remove border from specific PrimeFaces p:panelGrid?

I have difficulty in removing border from a specific PrimeFaces <p:panelGrid>. <p:panelGrid styleClass="companyHeaderGrid"> <p:row> <p:column> Some tags </p:column> <p:column> Some tags &…

Read More
How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable> with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over. …

Read More
How do I override default PrimeFaces CSS with custom styles?

I've created my own theme as a separate Maven project, and it is loaded correctly. Now I want to change the size of an component. For example, a <p:orderList>. It has a class called ui-orderlist-list which is …

Read More