How to remove border from specific PrimeFaces p:panelGrid?
css, facelets, jsf, primefaces
Solution
The border is been set on the generated `tr` and `td` elements, not on the `table`. So, this should do:
.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid .ui-panelgrid-cell {
border: none;
}
How I found it? Just check the generated HTML output and all CSS style rules in the webdeveloper toolset of Chrome (rightclick, Inspect Element or press F12). Firebug and IE9 have a similar toolset. As to the confusion, just keep in mind that JSF/Facelets ultimately generates HTML and that CSS only applies on the HTML markup, not on the JSF source code. So to apply/finetune CSS you need to look in the client (webbrowser) side instead.
See also:
- How do I override default PrimeFaces CSS with custom styles?
- Remove border from all PrimeFaces p:panelGrid components
If you're still on PrimeFaces 4 or older, use below instead:
.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
border: none;
}
Problem
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 </p:column> </p:row> </p:panelGrid> ``` I have been able to remove border from the cells with: ``` .companyHeaderGrid td { border: none; } ``` But ``` .companyHeaderGrid { border: none; } ``` Does not work.