如何从p:panelGrid中的p:row中删除特定(底部)边框?
问题描述:
我只需要删除<p:row>
在<p:panelGrid>
中显示的底部边框。我尝试了以下。如何从p:panelGrid中的p:row中删除特定(底部)边框?
CSS:
.panelgrid-cell-noborder.ui-panelgrid .ui-panelgrid-cell {
border-bottom: none;
}
XHTML:
<p:panelGrid style="width: 100%;">
<p:row>
<p:column>a</p:column>
<p:column>b</p:column>
</p:row>
<p:row>
<p:column styleClass="panelgrid-cell-noborder">c</p:column>
<p:column styleClass="panelgrid-cell-noborder">d</p:column>
</p:row>
<p:row>
<p:column>e</p:column>
<p:column>f</p:column>
</p:row>
</p:panelGrid>
从中间一排的下边框有望被删除,但事实并非如此。
如何从中间行中删除底部边框,在这个例子中?
答
每个单元都有边界在这种情况下,在默认情况下,所以你应该取消下边框与下方的排的上边框:
XHTML:
<p:panelGrid style="width: 100%;">
<p:row>
<p:column>a</p:column>
<p:column>b</p:column>
</p:row>
<p:row>
<p:column styleClass="panelgrid-cell-noborder-bottom">c</p:column>
<p:column styleClass="panelgrid-cell-noborder-bottom">d</p:column>
</p:row>
<p:row>
<p:column styleClass="panelgrid-cell-noborder-top">e</p:column>
<p:column styleClass="panelgrid-cell-noborder-top">f</p:column>
</p:row>
</p:panelGrid>
CSS:
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-bottom {
border-bottom: none;
}
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-top {
border-top: none;
}
另外,你的CSS不正确,你把ui-panelgrid
和单元格样式放在一起,检查我的例子。
编辑:
你可能必须覆盖的主题风格了,如果你在默认情况下有他们,因为有两个主题和风格primefaces定义的边界,你可以尝试添加此例如:
/* cancel border defined in aristo theme */
.ui-panelgrid .ui-widget-content{
border: none;
}
/* extra: you can add this if you want to recover the same color you cancelled above */
.ui-panelgrid .ui-panelgrid-cell {
border: 1px solid #a8a8a8;
}
对不起,下边框不会被使用这些CSS类删除(我只是复制/粘贴代码,它不起作用)。 – Tiny 2014-10-08 14:38:35
@Tiny对不起,我有一个自定义的主题,它为我工作。现在我从头开始创建一个项目,并注意到默认主题也存在,但是类为'.ui-widget-content',尝试编辑并保持更新:) – mrganser 2014-10-08 21:31:14
底部订单已被删除。谢谢。 :) – Tiny 2014-10-09 14:13:49