3

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

Rasshu
  • 1,764
  • 6
  • 22
  • 53

2 Answers2

10

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.

Rasshu
  • 1,764
  • 6
  • 22
  • 53
2

to set transparent backgroung and no border on panelgrid you can add the "ui-panelgrid-blank" class

<p:panelGrid columns="2" styleClass="ui-panelgrid-blank">
   <h:outputText value="Hello" />
   <h:outputText value="world" />
</p:panelGrid>
  • Is this a default PrimeFaces provided css class? Which versions supports this? Also the version from 6 years old? Please add this info to the answer – Kukeltje May 14 '20 at 16:14
  • It seems it came with PrimeFaces 6: https://github.com/primefaces/primefaces/issues/2677 – Rasshu May 15 '20 at 21:30