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
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>
Source: Stackoverflow.com