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

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.

This question is related to css jsf primefaces facelets

The answer is


This worked for me:

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

If BalusC answer doesn't work try this:

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

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>

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>

Use below style modification to remove border for Primefaces radio button

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

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


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.


Try

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

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>  

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.


Please try this too

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

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

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


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>

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to jsf

Identifying and solving javax.el.PropertyNotFoundException: Target Unreachable WELD-001408: Unsatisfied dependencies for type Customer with qualifiers @Default Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes Target Unreachable, identifier resolved to null in JSF 2.2 Execution order of events when pressing PrimeFaces p:commandButton selectOneMenu ajax events The entity name must immediately follow the '&' in the entity reference java.lang.ClassNotFoundException: javax.servlet.jsp.jstl.core.Config Primefaces valueChangeListener or <p:ajax listener not firing for p:selectOneMenu How does the 'binding' attribute work in JSF? When and how should it be used?

Examples related to primefaces

Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes Execution order of events when pressing PrimeFaces p:commandButton selectOneMenu ajax events Primefaces valueChangeListener or <p:ajax listener not firing for p:selectOneMenu List of <p:ajax> events Can I update a JSF component from a JSF backing bean method? How to remove border from specific PrimeFaces p:panelGrid? How to use PrimeFaces p:fileUpload? Listener method is never invoked or UploadedFile is null / throws an error / not usable How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar" How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

Examples related to facelets

The entity name must immediately follow the '&' in the entity reference Opening XML page shows "This XML file does not appear to have any style information associated with it." How to remove border from specific PrimeFaces p:panelGrid? How to use && in EL boolean expressions in Facelets? How to include another XHTML in XHTML using JSF 2.0 Facelets? Error parsing XHTML: The content of elements must consist of well-formed character data or markup How do I insert non breaking space character &nbsp; in a JSF page? Get Request and Session Parameters and Attributes from JSF pages How to display my application's errors in JSF?