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

Question

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.

score 103 · Accepted Answer

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

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

score 4 · Accepted Answer

现在，Primefaces 5.x 在 panelGrid 中有一个名为“columnClasses”的属性。

.no-border {
    border-style: hidden !important ; /* or none */
}

因此，对于具有 2 列的 panelGrid，重复两次 css 类。

<p:panelGrid columns="2" columnClasses="no-border, no-border">

对于其他元素，丑陋的“！important”不是必需的，但对于我来说，只要有它的边框就可以了。

score 3 · Accepted Answer

3

尝试

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

于 2016-03-21T05:58:59.293 回答

score 0 · Accepted Answer

只需在您的自定义 css mycss.css 上添加这些行

table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}

score 0 · Accepted Answer

正如 BalusC 所提到的，边界由 PrimeFaces 在生成的tr和td元素上设置，而不是在table. 然而，当尝试使用 PrimeFaces 版本 5 时，看起来 PrimeFaces CSS 中有更具体的匹配，.ui-panelgrid .ui-panelgrid-cell > solid这仍然会导致在应用建议的样式时显示黑色边框。

尝试使用以下样式以在不使用声明的情况下覆盖 Primefaces 之一!important：

.companyHeaderGrid tr, .companyHeaderGrid td.ui-panelgrid-cell {
    border: none;
}

如前所述，确保您的 CSS在 PrimeFaces 之后加载。

score 0 · Accepted Answer

对我来说只有以下代码有效

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>

score 0 · Accepted Answer

对于没有边界的传统以及所有现代主题，请应用以下内容；

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

score 0 · Accepted Answer

我将面板网格放在数据表中，因此我的工作解决方案是

.ui-datatable-scrollable-body .myStyleClass tbody td{border:none;}

为了

<h:panelGrid  styleClass="myStyleClass" >...</h:panelGrid>

score 0 · Accepted Answer

如果你只是想要更简单的东西，你可以改变：

<p:panelGrid >

</p:panelGrid>

至：

<h:panelGrid border="0">

</h:panelGrid>

这对我来说很好

score 0 · Accepted Answer

在 primefaces 中，theme.css 将具有以下代码，我们只需要将 styleClass 指定为 'ui-panelgrid-blank'。所以这将删除 panelGrid 组件的边框。

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

<p:panelGrid columns="2" layout="grid" styleClass="ui-panelgrid-blank">
</p:panelGrid>

score -1 · Accepted Answer

-1

请也试试这个

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

于 2014-06-11T09:48:47.857 回答

score -2 · Accepted Answer

使用以下样式修改删除 Primefaces 单选按钮的边框

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

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

16 回答 16

See also:

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

16 回答 16

See also:

Related

Reference