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.

Balus' answer is outdated. See this one: http://stackoverflow.com/a/41585497/1599699 — Andrew, Apr 17 '17 at 13:30

score 103 · Accepted Answer · edited Jun 20 '20 at 09:12

103

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.

enter image description here

1

you can add the following to override primefaces styles: .companyHeaderGrid tr, .companyHeaderGrid td { border: none !important; } – John Alexander Betts Sep 18 '13 at 20:52
4

@JohnB: the `!important` is unnecessary if you get your CSS loading order right: http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997 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). – BalusC Sep 18 '13 at 20:54
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 } ' – Erick Luz Jan 02 '20 at 12:42

score 49 · Answer 2 · answered Jan 11 '17 at 07:58

49

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

answered Jan 11 '17 at 07:58

Mr.Q

4,316
3
43
40

I like this more than the solving answer as it sticks with the CSS framework. – Roland Sep 27 '17 at 19:32
Seems not to exist in PF's bootstrap theme? – Roland Sep 27 '17 at 22:01
What happens if the next PF version doesn’t provide the style class anymore or changes the class? – Paul Wasilewski Oct 23 '18 at 20:52
@Andrew i think you must be new. There are many css classes which have been introduced, changed and disappeared over the time ;) – Paul Wasilewski Oct 23 '18 at 21:02
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. – Andrew Oct 23 '18 at 22:16
See https://primefaces.github.io/primefaces/8_0/#/components/panelgrid?id=blank-mode – Jasper de Vries Aug 21 '20 at 12:41

score 21 · Answer 3 · answered Jun 28 '13 at 15:23

21

This worked for me:

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

answered Jun 28 '13 at 15:23

Mohammed Pasha

235
2
2

Paul Wasilewski · Answer 4 · 2012-10-31T19:52:40.423

13

If BalusC answer doesn't work try this:

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

edited Oct 31 '12 at 19:52

answered Oct 25 '12 at 16:38

Paul Wasilewski

9,762
5
45
49

7

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 http://stackoverflow.com/questions/8768317/how-do-i-re-write-those-class-defined-in-primefaces-css/8774997#8774997 – BalusC Dec 20 '12 at 23:05

score 5 · Answer 5 · answered Oct 26 '14 at 17:11

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>

My Panelgrid is inside a DataTable & used for a selectOneRadio element with layout="custom". So this answer worked for me. Thanks a ton :) — satya prakash Panigrahi, Feb 10 '22 at 07:36

score 4 · Answer 6 · edited Jul 04 '19 at 07:00

4

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.

edited Jul 04 '19 at 07:00

seenukarthi

8,241
10
47
68

answered Jan 30 '15 at 22:09

Kanjarana

51
2

score 4 · Answer 7 · answered Mar 21 '16 at 05:58

4

Try

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

answered Mar 21 '16 at 05:58

spyder man

81
7

2

Please add explanation – Mohit Jain Mar 21 '16 at 07:16

score 0 · Answer 8 · answered Jul 09 '13 at 10:57

0

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

answered Jul 09 '13 at 10:57

Marouane Afroukh

2,783
2
14
9

score 0 · Answer 9 · edited May 23 '17 at 12:18

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.

score 0 · Answer 10 · answered May 09 '16 at 16:57

0

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

answered May 09 '16 at 16:57

Edson Cezar

25,884
5
19
27

score 0 · Answer 11 · edited Aug 26 '16 at 16:41

0

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>

edited Aug 26 '16 at 16:41

Peter G.

14,786
7
57
75

answered Aug 26 '16 at 16:26

jrabasilio

41
7

score 0 · Answer 12 · answered Mar 19 '17 at 09:20

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>

score 0 · Answer 13 · answered Oct 23 '18 at 08:33

0

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>

answered Oct 23 '18 at 08:33

Teela

153
1
3
9

score 0 · Answer 14 · answered Mar 25 '21 at 07:03

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>

score -1 · Answer 15 · answered Jun 11 '14 at 09:48

-1

Please try this too

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

answered Jun 11 '14 at 09:48

Karthik

371
3
7
30

score -2 · Answer 16 · answered Aug 12 '13 at 06:16

-2

Use below style modification to remove border for Primefaces radio button

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

answered Aug 12 '13 at 06:16

Ganesh Kumar

1

How to remove border from specific PrimeFaces p:panelGrid?

16 Answers16

See also:

Linked