3

I have a <p:dataTable> with <p:column selectionMode="multiple">.

<p:dataTable id="someAppDto" var="someAppDto" widgetVar="someAppDtoWV"
    value="#{someBean.requestedApplList}"
    style="width:96%" rows="100" paginator="true" scrollable="true" scrollHeight="300"
    selection="#{someBean.dvoList}" rowSelectMode="checkbox"
    rowKey="#{someAppDto.m_nDVOId}"
    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
    filteredValue="#{someBean.requestedApplListFltr}" rowsPerPageTemplate="10,50,100" resizableColumns="true" liveResize="true">
    ...
    <p:column selectionMode="multiple" style="width:10px;"/>
    ...
</p:dataTable>

The same code has been working since past 10 years without any issues. However since last 3-4 weeks, we see these weird icons in the checkboxes. It is not impacting any functionalities, Only creating confusions. So our end users want to fix it.

image of checkboxes

Upon checking the check box, the weired characters gone. But when uncheck, it comes back again. I tried to create a jsfiddle for this, but I couldn't reproduce. So posting screenshots from Inspect Element in chrome browser.

Inspect Element from chrome browser

Yes, I did delete browser cache and tried, no luck.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
SK.
  • 1,390
  • 2
  • 28
  • 59
  • [Same problem](https://stackoverflow.com/questions/76759698/primefaces-5-2-pselectmanycheckbox-rendering-unnecessary-icons), facing this problem (PF 6.2), only on the latest Chrome or Edge, and depending on screen resolution. Removing `border-radius` or `background-repeat: no-repeat`, seems to fix it, but I don't know why. It occurs with every checkbox(ui-icon-blank), as you can see in your image it's the [second column](https://mostre.cab.unipd.it/index/static/jquery/jquery-ui/jquery-ui-bootstrap/images/ui-icons_454545_256x240.png) and if you reduce the width of the window, the icons change. – WoAiNii Aug 04 '23 at 18:19
  • Most likely a browser update? Because the code clearly has not changed. @WoAiNii please put your suggestion as the Answer and I will upvote it! – Melloware Aug 05 '23 at 12:52

1 Answers1

0

Somewhat I agree with you all regarding browser upgrade. But I wonder how come it happens in both Edge and Chrome browser??? No Code deployment since past 4-5 months. Whatever code changed, it was before 4-5 months and nothing related to this.

OK, Now this what I did, it is working in my local. I have not yet deplyed in Dev/UAT.

.ui-chkbox .ui-chkbox-box{
   height: 12px;
   width: 12px;
   background: #ffffff none !important;
   text-shadow : none;
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
}

After:

.ui-chkbox .ui-chkbox-box{
   height: 13px;
   width: 13px;
   background: #ffffff none !important;
   text-shadow : none;
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
}

Only changed the height and width from 12px to 13px.

FYI: The above CSS code is in our global .css file

I know it is NOT a good solution, but for now, it is working and users are happy. I will still look for a better solution

SK.
  • 1,390
  • 2
  • 28
  • 59