60

特定の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>

私は次の方法でセルから境界線を削除することができました：

.companyHeaderGrid td {
    border: none;
}

だが

.companyHeaderGrid {
    border: none;
}

動作しません。

4

16 に答える 16

103

The border is been set on the generated tr and td elements, not on the table. So, this should do:

.companyHeaderGrid.ui-panelgrid>*>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.

enter image description here

See also:

If you're still on PrimeFaces 4 or older, use below instead:

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
    border: none;
}
于 2012-05-02T21:00:35.193 に答える
46

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

于 2017-01-11T07:58:18.647 に答える
21

This worked for me:

.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}
于 2013-06-28T15:23:43.243 に答える
12

If BalusC answer doesn't work try this:

.companyHeaderGrid td {
     border-style: hidden !important;
}
于 2012-10-25T16:38:21.250 に答える
5

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>
于 2014-10-26T17:11:18.717 に答える
4

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.

于 2015-01-30T22:09:36.483 に答える
3

Try

<p:panelGrid styleClass="ui-noborder">
于 2016-03-21T05:58:59.293 に答える
0

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;
}
于 2013-07-09T10:57:56.000 に答える
0

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.

于 2015-05-19T08:33:56.097 に答える
0

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

于 2016-05-09T16:57:42.740 に答える
0

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>
于 2016-08-26T16:26:05.583 に答える
0

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>
于 2017-03-19T09:20:55.757 に答える
0

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>
于 2018-10-23T08:33:35.900 に答える
0

In primefaces, theme.css will have below code, just we need to specify styleClass as 'ui-panelgrid-blank'. So this will remove the border for panelGrid component.

.ui-panelgrid.ui-panelgrid-blank {
  border: 0 none;
  background: none;
}

<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
</p:panelGrid>
于 2021-03-25T07:03:40.683 に答える
-1

Please try this too 

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}
于 2014-06-11T09:48:47.857 に答える
-2

Use below style modification to remove border for Primefaces radio button

.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}
于 2013-08-12T06:16:25.740 に答える