3

We have had this application for many years. But suddenly this issue cropped up. The checkboxes have these unwanted icons out of the blue. Not sure what went wrong. This issue appeared in all DEV/UAT/PROD environments, even without any recent deployments. So I am guessing something to do with CSS/FA Icons which is getting updated live. But I am not sure where to look/start.

enter image description here

code snippet below :

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

Any solutions/suggestions highly appreciated

Nishad K Ahamed
  • 1,374
  • 15
  • 25
  • Facing same problem now (PF 6.2), only on latest Chrome or Edge, and depending of screen resolution. Removing `border-radius` or `background-repeat: no-repeat`, added by the theme, seems to fix, but I don't know why. – WoAiNii Jul 31 '23 at 19:33
  • @WoAiNii, I don't understand can you please elaborate? – Nishad K Ahamed Aug 02 '23 at 07:42
  • I've got this error, only with some theme, PF <= 6.2, [icon](https://mostre.cab.unipd.it/index/static/jquery/jquery-ui/jquery-ui-bootstrap/images/ui-icons_454545_256x240.png) with every checkbox, related to ui-icon-blank, if they're on left of the page. As you can see in your image it's the second column and if you reduce the width of the window, the icons change. Adding or removing the above css it's the only way I find to avoid it – WoAiNii Aug 02 '23 at 19:42

1 Answers1

1

The problem occurs since a few weeks ago, with PrimeFaces < 7 (the newer ones use a font instead of background-image, so no issue). To reproduce you could use a theme with border-radius, for ui-icon class. Basically, the problem is with every checkbox, and with ui-icon-blank, here's an example:

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/>

Here's some workarounds overriding css (I think the clean solution is open a bug to Chrome):
Remove border-radius

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

Remove backgroud-repeat

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

Remove background-image for ui-icon-blank

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

Depending on your css/theme, you could need to add !important or adapt to your need.

EDIT:

The problem apply also to radio buttons, so I updated the above workarounds.

WoAiNii
  • 1,003
  • 1
  • 11
  • 19