Remove border from all PrimeFaces p:panelGrid components

Question

I need to hide all borders of all panelgrids using primefaces. I have tried he following without effects:

table {
    border: none;
}

table tr, table td {
    border: none;
}

What can I do?

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

7

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.

Excuse me, I delete my comment because !important fix the problem. I don't know what I need to do that in primefaces 5.1. Your answer is right – John Alexander Betts Oct 14 '14 at 16:11
The `!important` flag is a workaround, not a solution. The right solution is to alter the CSS selector accordingly to fit the changes in PrimeFaces 5.1 default CSS. See also the first link in the answer for detail on that. – BalusC Oct 14 '14 at 16:12
Yes I know. I learned it from you months ago. It is only a temporal solution – John Alexander Betts Oct 14 '14 at 16:15
This remove the datatable cells borders too in primefaces 5.1. I need this fix only in panelGrid components – John Alexander Betts Apr 08 '15 at 20:43
1

I am using PrimeFaces 5.2 and this did not work for me. I used codes from http://forum.primefaces.org/viewtopic.php?f=23&t=42334 instead – wolf97084 Oct 08 '15 at 19:16

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

This solution affect only panelGrids but dataTables:

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

edited May 23 '17 at 11:52

Community

answered Jul 16 '15 at 13:38

score 0 · Answer 3 · answered Sep 19 '13 at 14:40

0

It may be that your CSS is overwritten somewhere else. You could try using the !important rule.

table, table tr, table td {
   border: none !important;
}

answered Sep 19 '13 at 14:40

GreyRoofPigeon

Ok, you are right but I don't understand why it is happening if I am including my style.css file in the body – John Alexander Betts Sep 19 '13 at 14:42
Is there an other stylesheet? Or inline style? It could also be that another rule in style.css is more specific and therefor applies before the above one. – GreyRoofPigeon Sep 19 '13 at 14:45
No there isn't. I put my table style at the top of my css file and I don't have another css file in my project – John Alexander Betts Sep 19 '13 at 14:47
`!important` is here not a solution. It's a workaround. Read on [CSS specificity, inheritance and cascading rules](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/). The `!important` should **only** be used when you'd like to override a style which is hardcoded in HTML element's `style` attribute. This is not the case here. – BalusC Sep 19 '13 at 17:04

score -1 · Answer 4 · answered Nov 07 '14 at 12:45

-1

Tested on primefaces 5.1

.ui-widget-content {
border: none;
}

answered Nov 07 '14 at 12:45

xav56883728

score -1 · Answer 5 · answered Jun 08 '15 at 16:50

-1

This work in Primefaces 5

.ui-panelgrid-content {
    border: none;
}

answered Jun 08 '15 at 16:50

Alexander Cedeño

5 Answers5