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;
}

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

enter image description here

虚线边框不正确地应用于跨越第一个地址行的行以及跨越网格标题的列。

如何正确应用虚线边框？

Answer 1

我认为我以前遇到过这个问题，对我来说这似乎是一个错误（for example）。如果你真的想要保留它，我会给你一些解决方法＆＃34;点缀＆＃34;你可以和他们一起玩并选择类似的东西：

首先（试试这个）：

.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%;
}

使用桌子的宽度，更宽的渲染对我来说。

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

p：panelGrid中的边框样式

1 个答案: