Primefaces 5.2 - p:selectManyCheckbox 渲染不必要的图标

Question

我们已经使用这个应用程序很多年了。但突然就出现了这个问题。 复选框突然出现了这些不需要的图标。不知道出了什么问题。此问题出现在所有 DEV/UAT/PROD 环境中，即使最近没有任何部署也是如此。所以我猜测与实时更新的 CSS/FA 图标有关。但我不知道从哪里看/开始。

下面的代码片段：

<ul class="list-group filterby">
                    <li class="list-group-item subtitle">By Metal</li>
                    <li class="list-group-item"><p:selectManyCheckbox
                            layout="grid" columns="1"
                            value="#{physicalProductBean.selectedCurrencyPair}"
                            valueChangeListener="#{physicalProductBean.selectedCurrencyChanged}">
                            <f:selectItems
                                value="#{physicalProductBean.availableCurrencyPairsProduct}"
                                var="eachCurrency" itemLabel="#{eachCurrency.symbol}"
                                itemValue="#{eachCurrency.id}" />
                            <p:ajax update=":physicalProductForm:productListing"></p:ajax>
                        </p:selectManyCheckbox></li>
                </ul>

任何解决方案/建议都非常感谢

Answer 1

这个问题从几周前就出现了，使用的是 PrimeFaces < 7 (the newer ones use a font instead of

background-image

，所以没有问题）。要重现，您可以使用带有边框半径的主题，用于

ui-icon

类。 基本上，问题出在每个复选框上，对于

ui-icon-blank

，这是一个示例：

span {
    display: block;
    margin-top: 0em;
    width: 16px;
    height: 16px;
}
.ui-chkbox-icon.ui-icon {
    border-radius: 10px;
}
.ui-chkbox-icon.ui-icon {
    overflow: visible;
}
.ui-icon {
    display: block;
    vertical-align: baseline;
    margin-top: 0;
}
.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -0.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.ui-icon-blank {
    background-position: 16px 16px;
}
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(https://mostre.cab.unipd.it/index/static/jquery/jquery-ui/jquery-ui-bootstrap/images/ui-icons_454545_256x240.png);
}

<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>

这里有一些解决方法覆盖CSS（我认为干净的解决方案是向Chrome打开一个错误）：
删除

border-radius

.ui-chkbox-icon.ui-icon {
    border-radius: 0px;
}

删除

backgroud-repeat

.ui-chkbox-icon.ui-icon {
    backgroud-repeat: unset;
}

删除

background-image

为

ui-icon-blank

.ui-chkbox-icon.ui-icon.ui-icon-blank {
    background-image: none;
}

根据您的 CSS/主题，您可能需要添加

!important

或适应您的需要。