Remove all border on all panelgrids not on datatables

Question

I need to hide all borders of all panelGrids using primefaces. The following code remove the borders on all panelGrids and dataTables too (primefaces 5+):

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

I need this effect only in panelGrids. After that and I need to know how to show the borders only in some panelGrids

May help you : http://stackoverflow.com/questions/29059960/ppanelgrid-inside-ppanelgrid-how-to-remove-borders-in-an-outer-ppanelgrid/29062798#29062798 — Bhavin Panchani, Jul 15 '15 at 18:30
Learn basic css, learn how to use developer tools to test css, Learn how to use styleClass to create selectors etc. This technically is not even a PrimeFaces issue, just plain css/html — Kukeltje, Jul 15 '15 at 21:07
Thanks @BhavinPanchani but I need to do it in all panelGrids of my application and then I need to show borders only one panelGrid. — John Alexander Betts, Jul 15 '15 at 21:13
@Kukeltje I know how to work with those technologies but I don't know how to do what I asked — John Alexander Betts, Jul 15 '15 at 21:14
@JohnB: Sorry, but I tend to disagree. Let me guess... The datatables are inside the panelgrid right — Kukeltje, Jul 15 '15 at 22:47
Hint: try something like: `.ui-panelgrid > * > tr, .ui-panelgrid > * > tr > td.ui-panelgrid-cell { border: none; }` — Kukeltje, Jul 15 '15 at 22:58
To remove the borders for all panelGrid use this : .ui-panelgrid tr, .ui-panelgrid td { border: none; } and for those panelGrid you want border : apply styleClass and use : appliedStyleClass tr, appliedStyleClass td{ border : 1px;} — Bhavin Panchani, Jul 16 '15 at 07:04
Thanks @Kukeltje your comment works for me. Could you put it as answer please? I will use the developer tool to see the your solution affect only panelGrids but dataTables — John Alexander Betts, Jul 16 '15 at 13:24
Thanks @BhavinPanchani but your solution doesn't work for me — John Alexander Betts, Jul 16 '15 at 13:24
@BhavinPanchani: to complex if you want to be able to use themes... What border do you assign then? And it still removes borders for descending datatables — Kukeltje, Jul 16 '15 at 13:52

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

Your CSS selectors are to 'broad'. They influence all <tr> and <td> tags that are descendants of a .ui-panelgrid, including all that are in a table that is in a panelgrid cell as descendants of the table that makes the datatable. So you have to make your selectors more specific (read about css specificity on mozdev) and have them only target a certain level .

Use e.g.

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

This only targets <tr>'s that are a grandchild of a .ui-panelgrid and its direct <td> children.

If you don't want this applied to all panelgrids, You'll have to use the styleClass referred to in a comment above by @BhavinPanchani. But instead of explicitly adding borders by using a class, you prevent the css above to be applied.

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

Just add the keepBorder class to the panelGrids that you want to keep the border. I did not test this last thing, but with a little testing you;

See also

Can I write a CSS selector selecting elements NOT having a certain class?

edited May 23 '17 at 12:06

Community

1
1

answered Jul 16 '15 at 13:51

Kukeltje

12,223
4
24
47

How can I put the borders in one panelGrid when I have applied this solution? – John Alexander Betts Jul 16 '15 at 14:54
I'm almost tempted to refer to _"@... I know how to work with those technologies but I don't know how to do what I asked "_, but I won't... (hmmm just did)... I'll update the answer – Kukeltje Jul 16 '15 at 14:58
Thanks Kukeltje. I know them but I'm not an expert :) – John Alexander Betts Jul 16 '15 at 15:31
:-) ok… but to me (but I might be to outspoken) this is part of css 'basics' and by reading one good introduction, you'll at least know what is all possible. Applying it might fail sometimes then, but SO comes to the rescue then. – Kukeltje Jul 16 '15 at 16:22

Remove all border on all panelgrids not on datatables

1 Answers1

Linked