How to remove border from certain PrimeFaces p: panelGrid?

Question

I find it difficult to remove a 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 managed to remove the border from the cells with:

 .companyHeaderGrid td { border: none; } 

But

 .companyHeaderGrid { border: none; } 

Does not work.

Answer 1

The border is set to the generated tr and td elements, and not to table . So this should do:

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

How did I find him? Just check the generated HTML output and all CSS style rules in the webdeveloper toolkit for Chrome (rightclick, Inspect Element or press F12). Firebug and IE9 have a similar set of tools. As for the confusion, just keep in mind that JSF / Facelets ultimately generates HTML and that CSS only applies to HTML markup and not to the JSF source code. Therefore, to use / finetune CSS, you need to search on the client side (web browser).

See also:

• How to override default PrimeFaces CSS with custom styles?
• Remove border from all PrimeFaces p: panelGrid components

---

If you are still on PrimeFaces 4 or older, use below:

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

Answer 2

I use Primefaces 6.0 and in order to remove borders from my panel, I use this "ui-noborder" style class as follows:

 <p:panelGrid columns="3" styleClass="ui-noborder"> <!--panel grid contents --> </p:panelGrid> 

It uses a css file called "components" in lib files

Answer 3

This worked for me:

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

Answer 4

If BalusC's answer does not work, try this:

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

Answer 5

If you find a row between columns, use the code below,

 .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

Primefaces 5.x currently has an attribute in PanelGrid named "columnClasses".

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

So, for a PanelGrid with 2 columns, repeat the CSS class twice.

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

For other elements, the ugly “Important!” Is not needed, but for the border, it just works fine for me.

Answer 7

Try

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

Answer 8

Just add these lines to your own 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, PrimeFaces sets the border on the generated tr and td elements, not on the table . However, when you try to use PrimeFaces version 5, there seems to be a more specific match with PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid , which still leads to black borders when applying the proposed style.

Try using the following style to override Primefaces without using the !important declaration:

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

As a mention, make sure your CSS is loaded after the PrimeFaces version .

Answer 10

If you just want something simpler, you can just change:

 <p:panelGrid > </p:panelGrid> 

at

 <h:panelGrid border="0"> </h:panelGrid> 

It worked great for me

Answer 11

only the following code works for me

 .noBorder tr { border-width: 0 ; } .ui-panelgrid td{ border-width: 0 } <p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" > </p:panelGrid> 

Answer 12

For traditional, as well as for all 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 panel inside the data table, and therefore my working solution

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

behind

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

Answer 14

Please try this too

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

Answer 15

Use the style modification below to remove the border for the Primefaces switch.

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