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.
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.
If you're still on PrimeFaces 4 or older, use below instead:
.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
border: none;
}
I am using Primefaces 6.0 and in order to remove borders from my panel grid i use this style class "ui-noborder" as follow:
<p:panelGrid columns="3" styleClass="ui-noborder">
<!--panel grid contents -->
</p:panelGrid>
It uses a css file named "components" in primefaces lib
This worked for me:
.ui-panelgrid td, .ui-panelgrid tr { border-style: none !important }
If BalusC answer doesn't work try this:
.companyHeaderGrid td {
border-style: hidden !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With