How to remove border from specific PrimeFaces p:panelGrid?

Question

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.

Answer 1

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;
}

Answer 2

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

Answer 3

This worked for me:

.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}

Answer 4

If BalusC answer doesn't work try this:

.companyHeaderGrid td {
     border-style: hidden !important;
}

Answer 5

If you find a line in between the columns then use the below code,

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td{
border: hidden;
border-color: white;
}

I checked this with Primefaces 5.1

<h:head>
     <title>Login Page</title>    
     <h:outputStylesheet library="css" name="common.css"/>
</h:head> 

<p:panelGrid id="loginPanel" columns="3" styleClass="panelNoBorder">
<p:outputLabel value="Username"/> <p:inputText id="loginTextUsername"/>
<p:outputLabel value="Password"/> <p:password id="loginPassword"/>
<p:commandButton id="loginButtonLogin" value="Login"/> <p:commandButton id="loginButtonClear" value="Clear"/>
</p:panelGrid>  

Answer 6

Nowdays, Primefaces 5.x have a attribute in panelGrid named "columnClasses".

.no-border {
    border-style: hidden !important ; /* or none */
}

So, to a panelGrid with 2 columns, repeat two times the css class.

<p:panelGrid columns="2" columnClasses="no-border, no-border">

To other elements, the ugly " !important " is not necessary, but to the border just with it work fine to me.

Answer 7

Try

<p:panelGrid styleClass="ui-noborder">

Answer 8

Just add those lines on your custom css mycss.css

table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}

Answer 9

As mentioned by BalusC, the border is set by PrimeFaces on the generated tr and td elements, not on the table. However when trying with PrimeFaces version 5, it looks like there is a more specific match from the PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid which still result in black borders being shown when appyling the style suggested.

Try using following style in order to overide the Primefaces one without using the !important declaration:

.companyHeaderGrid tr, .companyHeaderGrid td.ui-panelgrid-cell {
    border: none;
}

As mention make sure your CSS is loaded after the PrimeFaces one.

Answer 10

If you just want something more simple, you can just change:

<p:panelGrid >

</p:panelGrid>

to:

<h:panelGrid border="0">

</h:panelGrid>

That's worked fine for me

Answer 11

for me only the following code works

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>

Answer 12

For the traditional as well as all the modern themes to have no border, apply the following;

<!--No Border on PanelGrid-->
    <h:outputStylesheet>
        .ui-panelgrid, .ui-panelgrid td, .ui-panelgrid tr, .ui-panelgrid tbody tr td
        {
            border: none !important;
            border-style: none !important;
            border-width: 0px !important;
        }
    </h:outputStylesheet>

Answer 13

I placed the panelgrid inside datatable, and hence my working solution is

.ui-datatable-scrollable-body .myStyleClass tbody td{border:none;}

for

<h:panelGrid  styleClass="myStyleClass" >...</h:panelGrid>

Answer 14

Please try this too

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

Answer 15

Use below style modification to remove border for Primefaces radio button

.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}