CODEWITHSUNDEEP
cssjsfprimefaces
Shekhar Khairnar
Shekhar Khairnar

Reputation: 2691

Hide border of <p:panelGrid> primefaces without affecting inner data table

How to hide the grid-line(border) of p:panelGrid without affecting the the border of inner data table in primefaces 4.0

Currently using this CSS :

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

which affects both data table and panel grid. But I want only panel grid lines to be hidden.

In my case data table is nested inside panel grid.

Thanks.

Upvotes: 3

Views: 21822

Answers (4)

K.Nicholas
K.Nicholas

Reputation: 11551

As of version 5.3 (or earlier)

Blank Mode: To remove borders add ui-noborder style class to the component using styleClass attribute and to remove borders plus background color, apply ui-panelgrid-blank style.

Upvotes: 4

user3839350
user3839350

Reputation: 31

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

.ui-datatable .ui-datatable-data tr,.ui-datatable .ui-datatable-data-empty tr,.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{
  border:1px solid !important;
}

Upvotes: 3

Nikel Weis
Nikel Weis

Reputation: 724

I know I'm late to party but I just came accross the same problem and fixed it by using a h:panelgrid (standard jsf-library) instead of the primefaces element. There you have the border attribute.

<h:panelGrid border= "0">
 [inner Table - not affected]
</h:panelGrid>

Upvotes: 5

Saeed
Saeed

Reputation: 3775

You can use this code in your CSS file:

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

Upvotes: 0

Related Questions