How to Remove Border from Specific Primefaces P:Panelgrid

How to remove border from specific PrimeFaces p:panelGrid?

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.

Sample Image

p:panelGrid inside p:panelGrid, how to remove borders in an outer p:panelGrid?

To apply style rules to jsf components use styleClass attribute :

 <p:panelGrid id="main-panel" styleClass="outerpanelgrid">
        <p:row>
            <p:column>
                outer table column 1
                        <p:panelGrid styleClass="innerpanelgrid">
                            <p:row>
                                <p:column>
                                    inner table column 1
                                </p:column>
                                <p:column>
                                    inner table column 2
                                </p:column>
                            </p:row>
                        </p:panelGrid>
            </p:column>
            <p:column>
                outer table column 2

            </p:column>
        </p:row>
</p:panelGrid>

Try using following style rule :-

.outerpanelgrid>tbody>tr{
    border: none !important;
}
.outerpanelgrid>tbody>tr>td{
    border: none !important;
}

OR another option is you can set border for inner panelgrid.

 .outerpanelgrid tbody tr, .outerpanelgrid tbody td{  
    border: none;
 }
.innerpanelgrid tbody tr, .innerpanelgrid tbody td{
    border: 1px solid red ;
}

Remove border from all PrimeFaces p:panelGrid components

You need to be at least as specific as the PrimeFaces default selector.

.ui-panelgrid>*>tr,
.ui-panelgrid .ui-panelgrid-cell {
    border: none;
}

Do not use !important unless you need to override a hardcoded style on a HTML element.

Border styles in p:panelGrid

I think I've faced this problem before and it looks like a bug to me (for example). I'll offer you some workarounds if you really want to keep it "dotted" and you can play with them and choose something similar:

First (try this):

.panelgrid-dotted-border{
    border-collapse: separate;
    border-spacing: 0;
    border: 1px dotted #929292;
}
.panelgrid-dotted-border.ui-panelgrid tr, .panelgrid-dotted-border.ui-panelgrid .ui-panelgrid-cell {
    border: 1px dotted #929292;
}

You force borders to separate but give them 0 space. This way you can have dots, but double number of dots together. If you also add a lighter color the double number of dots look fine.

Second:

.panelgrid-dotted-border{
    border-collapse: separate;
    border-spacing: 2px;
}

You can just separate the borders. Looks good too!

Third:

.panelgrid-dotted-border.ui-panelgrid {
    width: 100%;
}

Play with the width of the table, wider renders perfecly for me.

None of them are a real solution but maybe they can help you.

panelGrid border does not want to be hidden

https://primefaces.github.io/primefaces/8_0/#/components/panelgrid?id=blank-mode

To remove borders add ui-noborder style class to the component using styleClass attribute and to remove borders plus background color, apply ui-panelgrid-blank style.

How to remove a specific (bottom) border from p:row in p:panelGrid?

Every cell has border in this case by default, so you should cancel bottom border and top border of the row below:

XHTML:

<p:panelGrid style="width: 100%;">
    <p:row>
        <p:column>a</p:column>
        <p:column>b</p:column>
    </p:row>

    <p:row>
        <p:column styleClass="panelgrid-cell-noborder-bottom">c</p:column>
        <p:column styleClass="panelgrid-cell-noborder-bottom">d</p:column>
    </p:row>

    <p:row>
        <p:column styleClass="panelgrid-cell-noborder-top">e</p:column>
        <p:column styleClass="panelgrid-cell-noborder-top">f</p:column>
    </p:row>
</p:panelGrid>

CSS:

.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-bottom {
    border-bottom: none;
}
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-top {
    border-top: none;
}

Also, your CSS was incorrect, you put ui-panelgrid together with the cell style, check that in my example too.

Edit:

You'll probably have to override theme styles too if you have them by default, because there are borders defined in both theme and primefaces styles, you could try adding this for example:

/* cancel border defined in aristo theme */
.ui-panelgrid .ui-widget-content{
    border: none;
}
/* extra: you can add this if you want to recover the same color you cancelled above  */
.ui-panelgrid .ui-panelgrid-cell {
    border: 1px solid #a8a8a8;
}

Issue removing border from one column in primefaces table

Other classes for header and row give borders too, so you have to get rid of them like this (give your panelGrid class noBroder like this <p:panelGrid styleClass="noBorder">)

.noCellBorder, table.noBorder thead tr.ui-widget-header, table.noBorder .ui-panelgrid-even, table.noBorder .ui-panelgrid-odd {
     border: none !important;
}

But is gives black borders for other cells, don't know if you like it.

Transparent background-color in PrimeFaces panelGrid

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.

How to Remove Border from Specific Primefaces P:Panelgrid