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.

Paltry

Balus' answer is outdated. See this one: https://mcmap.net/q/18286/-how-to-remove-border-from-specific-primefaces-p-panelgrid – Repentant

@Repentant I don’t think that this is a good answer. – Surra

@PaulWasilewski I think it is. – Repentant

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

Compensation

you can add the following to override primefaces styles: .companyHeaderGrid tr, .companyHeaderGrid td { border: none !important; } – Grecism

@JohnB: the !important is unnecessary if you get your CSS loading order right: stackoverflow.com/questions/8768317/… See also the answer of Andi here below and my comment on it. Do not use workarounds if there exist solutions. Use !important only as a true solution (i.e. when you need to override a hardcoded style="..." by a CSS selector declaration). – Compensation

Thanks, work's for me, but to remove all borders i have to modify to ' .companyHeaderGrid.ui-panelgrid, .companyHeaderGrid.ui-panelgrid>*>tr, .companyHeaderGrid.ui-panelgrid>*>tr>td { border: none !important } ' – Cassity

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

Chopine

I like this more than the solving answer as it sticks with the CSS framework. – Groundless

Seems not to exist in PF's bootstrap theme? – Groundless

What happens if the next PF version doesn’t provide the style class anymore or changes the class? – Surra

@Repentant i think you must be new. There are many css classes which have been introduced, changed and disappeared over the time ;) – Surra

Exactly. But because you're new you don't understand that this is the way you code in PF. There's no perfect solution, you have to suck it up and use non-ideal solutions all the time. This is excellent as far as PF is concerned. – Repentant

See primefaces.github.io/primefaces/8_0/#/components/… – Deodorant

Answer 3

This worked for me:

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

Slime

Answer 4

If BalusC answer doesn't work try this:

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

Surra

This is only applicable if your own CSS is not been loaded after PrimeFaces one, which is indeed a common starter's mistake. The !important declaration is then actually a workaround, not a solution. See for more detail also stackoverflow.com/questions/8768317/… – Compensation

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>  

Lempres

My Panelgrid is inside a DataTable & used for a selectOneRadio element with layout="custom". So this answer worked for me. Thanks a ton :) – Cavie

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.

Canonist

Answer 7

Try

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

Laughton

Please add explanation – Yerxa

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

Urias

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.

Cachexia

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

Conciliator

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>

Insatiable

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>

Finella

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>

Dromous

Answer 14

In primefaces, theme.css will have below code, just we need to specify styleClass as 'ui-panelgrid-blank'. So this will remove the border for panelGrid component.

.ui-panelgrid.ui-panelgrid-blank {
  border: 0 none;
  background: none;
}

<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
</p:panelGrid>

Gutter

Answer 15

Please try this too

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

Ezekiel

Answer 16

Use below style modification to remove border for Primefaces radio button

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

Fatigue