How to remove border from specific PrimeFaces p panelGrid

Question

I have difficulty in removing border from a specific PrimeFaces  lt p panelGrid gt     lt p panelGrid styleClass  companyHeaderGrid  gt       lt p row gt           lt p column gt              Some tags          lt  p column gt           lt p column gt              Some tags          lt  p column gt       lt  p row gt   lt  p panelGrid gt    I have been able to remove border from the cells with    companyHeaderGrid td       border  none      But   companyHeaderGrid       border  none      Does not work

User · Answer

Try   lt p panelGrid styleClass  ui-noborder  gt

User · Answer

for me only the following code works   noBorder tr   border-width  0      ui-panelgrid td      border-width  0     lt p panelGrid id  userFormFields  columns  2  styleClass  noBorder   gt   lt  p panelGrid gt

User · Answer

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   lt h head gt        lt title gt Login Page lt  title gt            lt h outputStylesheet library  css  name  common css   gt   lt  h head gt     lt p panelGrid id  loginPanel  columns  3  styleClass  panelNoBorder  gt   lt p outputLabel value  Username   gt   lt p inputText id  loginTextUsername   gt   lt p outputLabel value  Password   gt   lt p password id  loginPassword   gt   lt p commandButton id  loginButtonLogin  value  Login   gt   lt p commandButton id  loginButtonClear  value  Clear   gt   lt  p panelGrid gt

User · Answer

The border is been set on the generated tr and td elements  not on the table  So  this should do   companyHeaderGrid ui-panelgrid gt   gt 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   See also   How do I override default PrimeFaces CSS with custom styles  Remove border from all PrimeFaces p panelGrid components   If you re still on PrimeFaces 4 or older  use below instead   companyHeaderGrid ui-panelgrid gt   gt tr   companyHeaderGrid ui-panelgrid gt   gt tr gt td       border  none

User · Answer

For the traditional as well as all the modern themes to have no border  apply the following    lt  --No Border on PanelGrid-- gt       lt h outputStylesheet gt           ui-panelgrid   ui-panelgrid td   ui-panelgrid tr   ui-panelgrid tbody tr td                       border  none  important              border-style  none  important              border-width  0px  important                 lt  h outputStylesheet gt

User · Answer

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  gt  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

User · Answer

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    lt p panelGrid columns  3  styleClass  ui-noborder  gt      lt  --panel grid contents -- gt   lt  p panelGrid gt    It uses a css file named  components  in primefaces lib

User · Answer

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

User · Answer

Use below style modification to remove border for Primefaces radio button   ui-selectoneradio td   ui-selectoneradio tr       border-style  none  important

User · Answer

I placed the panelgrid inside datatable  and hence my working solution is   ui-datatable-scrollable-body  myStyleClass tbody td border none     for   lt h panelGrid  styleClass  myStyleClass   gt     lt  h panelGrid gt

User · Answer

Please try this too     ui-panelgrid tr   ui-panelgrid td   border 0  important

User · Answer

If you just want something more simple  you can just change    lt p panelGrid  gt    lt  p panelGrid gt    to    lt h panelGrid border  0  gt    lt  h panelGrid gt    That s worked fine for me

User · Answer

This worked for me     ui-panelgrid td   ui-panelgrid tr       border-style  none  important

User · Answer

If BalusC answer doesn t work try this    companyHeaderGrid td        border-style  hidden  important

User · Answer

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    lt p panelGrid columns  2  columnClasses  no-border  no-border  gt    To other elements  the ugly    important   is not necessary  but to the border just with it work fine to me

[css] How to remove border from specific PrimeFaces p:panelGrid?

Examples related to css

Examples related to jsf

Examples related to primefaces

Examples related to facelets