我正在尝试将虚线边框应用于 PF 5.0 <p:panelGrid>
如下。
<p:panelGrid styleClass="panelgrid-dotted-border">
<f:facet name="header">
<p:row>
<p:column colspan="2">
<h:outputText value="Shipping Address"/>
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width: 200px;">
<p:outputLabel for="firstName" value="First Name" style="font-weight: bold;"/>
</p:column>
<p:column style="width: 200px;">
<h:outputText id="firstName" value="First Name"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel for="middleName" value="Middle Name" style="font-weight: bold;"/>
</p:column>
<p:column>
<h:outputText id="middleName" value="Middle Name"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel for="lastName" value="Last Name" style="font-weight: bold;"/>
</p:column>
<p:column>
<h:outputText id="lastName" value="Last Name"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel for="address1" value="First Address" style="font-weight: bold;"/>
</p:column>
<p:column rowspan="8" style="vertical-align: top;">
<h:outputText id="address1" styleClass="address" value="First Address"/>
</p:column>
</p:row>
<p:row><p:column><h:outputText value=" " /></p:column></p:row>
<p:row><p:column><h:outputText value=" " /></p:column></p:row>
<p:row><p:column><h:outputText value=" " /></p:column></p:row>
<p:row><p:column><h:outputText value=" " /></p:column></p:row>
<p:row><p:column><h:outputText value=" " /></p:column></p:row>
<p:row><p:column><h:outputText value=" " /></p:column></p:row>
<p:row><p:column><h:outputText value=" " /></p:column></p:row>
</p:panelGrid>
CSS 类:
.panelgrid-dotted-border.ui-panelgrid tr, .panelgrid-dotted-border.ui-panelgrid .ui-panelgrid-cell {
border-top : 1px dotted #000;
border-right : 1px dotted #000;
border-bottom : 1px dotted #000;
border-left : 1px dotted #000;
}
虚线边框未正确应用于分别拆分为行和列的列和行,如下图所示。
虚线边框错误地应用于跨越第一个地址行的行和跨越网格标题的列。
如何正确应用虚线边框?
最佳答案
我想我以前遇到过这个问题,对我来说它看起来像是一个错误 (for example)。如果你真的想让它“点缀”,我会为你提供一些解决方法,你可以使用它们并选择类似的东西:
首先(试试这个):
.panelgrid-dotted-border{
border-collapse: separate;
border-spacing: 0;
border: 1px dotted #929292;
}
.panelgrid-dotted-border.ui-panelgrid tr, .panelgrid-dotted-border.ui-panelgrid .ui-panelgrid-cell {
border: 1px dotted #929292;
}
您强制边界分开但给它们 0 个空间。这样你就可以有点,但点数加倍。如果您还添加较浅的颜色,双倍的点数看起来不错。
第二:
.panelgrid-dotted-border{
border-collapse: separate;
border-spacing: 2px;
}
您可以只分隔边框。看起来也不错!
第三:
.panelgrid-dotted-border.ui-panelgrid {
width: 100%;
}
调整 table 的宽度,更宽的渲染对我来说是完美的。
它们都不是真正的解决方案,但也许它们可以帮助您。
关于css - p :panelGrid 中的边框样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26103229/