如何从特定的 PrimeFaces p:panelGrid 中删除边框?

Posted

技术标签:

【中文标题】如何从特定的 PrimeFaces p:panelGrid 中删除边框?【英文标题】:How to remove border from specific PrimeFaces p:panelGrid? 【发布时间】:2012-05-12 09:21:11 【问题描述】:

我很难从特定 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;

不起作用。

【问题讨论】:

Balus 的回答已经过时了。看到这个:***.com/a/41585497/1599699 @Andrew 我认为这不是一个好的答案。 @PaulWasilewski 我认为是。 【参考方案1】:

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

【讨论】:

【参考方案2】:

现在,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”不是必需的,但对于我来说,只要有它的边框就可以了。

【讨论】:

【参考方案3】:

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

.ui-datatable-scrollable-body .myStyleClass tbody tdborder:none;

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

【讨论】:

【参考方案4】:

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

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

【讨论】:

【参考方案5】:

我正在使用 Primefaces 6.0,为了从我的面板网格中删除边框,我使用了这个样式类“ui-noborder”,如下所示:

<p:panelGrid columns="3" styleClass="ui-noborder">
   <!--panel grid contents -->
</p:panelGrid>

它在 primefaces lib 中使用名为“components”的 css 文件

【讨论】:

我更喜欢这个解决方案,因为它坚持使用 CSS 框架。 PF 的引导主题中似乎不存在? 如果下一个 PF 版本不再提供样式类或更改类会怎样? @Andrew 我想你一定是新手。随着时间的推移,有许多 CSS 类被引入、改变和消失;) 没错。但是因为你是新手,所以你不明白这是你在 PF 中编码的方式。没有完美的解决方案,你必须接受它并一直使用非理想的解决方案。就 PF 而言,这非常好。【参考方案6】:

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

.noBorder tr 
border-width: 0 ;

.ui-panelgrid td
    border-width: 0


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

【讨论】:

【参考方案7】:

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

<p:panelGrid >

</p:panelGrid>

到:

<h:panelGrid border="0">

</h:panelGrid>

这对我来说很好用

【讨论】:

【参考方案8】:

试试

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

【讨论】:

请补充说明【参考方案9】:

边框是在生成的trtd 元素上设置的,而不是在table 上设置的。所以,应该这样做:

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid .ui-panelgrid-cell 
    border: none;

我是怎么找到的?只需在 Chrome 的 webdeveloper 工具集中检查生成的 html 输出和所有 CSS 样式规则(右键单击,Inspect Element 或按 F12)。 Firebug 和 IE9 有类似的工具集。至于混淆,请记住 JSF/Facelets 最终会生成 HTML,而 CSS 仅适用于 HTML 标记,而不适用于 JSF 源代码。因此,要应用/微调 CSS,您需要查看客户端(网络浏览器)端。

另见:

How do I override default PrimeFaces CSS with custom styles? Remove border from all PrimeFaces p:panelGrid components

如果您仍在使用 PrimeFaces 4 或更早版本,请改用以下内容:

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td 
    border: none;

【讨论】:

您可以添加以下内容来覆盖 primefaces 样式: .companyHeaderGrid tr, .companyHeaderGrid td border: none !important; @JohnB:如果你的 CSS 加载顺序正确,!important 是不必要的:***.com/questions/8768317/… 另请参阅下面 Andi 的答案和我的评论。如果存在解决方案,请勿使用变通方法。仅将 !important 用作真正的解决方案(即,当您需要通过 CSS 选择器声明覆盖硬编码的 style="..." 时)。 谢谢,工作对我来说,但要删除所有边框,我必须修改为 ' .companyHeaderGrid.ui-panelgrid, .companyHeaderGrid.ui-panelgrid>*>tr, .companyHeaderGrid.ui-panelgrid> *>tr>td 边框:无 !important '【参考方案10】:

正如 BalusC 所述,PrimeFaces 在生成的trtd 元素上设置边框,而不是在table 上。然而,当尝试使用 PrimeFaces 版本 5 时,似乎 PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell &gt; solid 有更具体的匹配,在应用建议的样式时仍会显示黑色边框。

尝试使用以下样式以覆盖 Primefaces 而不使用 !important 声明:

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

请确保您的 CSS 为 loaded after the PrimeFaces one。

【讨论】:

【参考方案11】:

如果您在列之间找到一条线,请使用以下代码,

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td
border: hidden;
border-color: white;

我使用 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>  

【讨论】:

【参考方案12】:

请也试试这个

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

【讨论】:

【参考方案13】:

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

.ui-selectoneradio td, .ui-selectoneradio tr

    border-style: none !important

【讨论】:

【参考方案14】:

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

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

【讨论】:

【参考方案15】:

这对我有用:

.ui-panelgrid td,.ui-panelgrid tr 边框样式:无!重要

【讨论】:

【参考方案16】:

如果 BalusC 的答案不起作用,试试这个:

.companyHeaderGrid td 
     border-style: hidden !important;

【讨论】:

这仅适用于您自己的 CSS 在 PrimeFaces 之后没有加载的情况,这确实是初学者的常见错误。 !important 声明实际上是一种解决方法,而不是解决方案。更多详细信息,另请参阅***.com/questions/8768317/…

以上是关于如何从特定的 PrimeFaces p:panelGrid 中删除边框?的主要内容,如果未能解决你的问题,请参考以下文章

没有TagLibrary与PrimeFaces的命名空间相关联

如何将 JSF 组件对齐到中心

如何在 PrimeFaces fileUpload 中向 fileUploadListener 发送参数

如何从primefaces中的javascript触发组件刷新?

在特定行启用或禁用 primefaces 数据表按钮

如何在页面加载之前隐藏可切换的 p:panel?