如何从特定的 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】:边框是在生成的tr
和td
元素上设置的,而不是在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 在生成的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 为 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的命名空间相关联
如何在 PrimeFaces fileUpload 中向 fileUploadListener 发送参数