css - p :panelGrid 中的边框样式

Question

我正在尝试将虚线边框应用于 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="&#160;" /></p:column></p:row>
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row>
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row>
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row>
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row>
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row>
    <p:row><p:column><h:outputText value="&#160;" /></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;
}

虚线边框未正确应用于分别拆分为行和列的列和行，如下图所示。

虚线边框错误地应用于跨越第一个地址行的行和跨越网格标题的列。

如何正确应用虚线边框？

Answer 1

我想我以前遇到过这个问题，对我来说它看起来像是一个错误 (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 的宽度，更宽的渲染对我来说是完美的。

它们都不是真正的解决方案，但也许它们可以帮助您。