CODEWITHSUNDEEP
javascripthtmlcssprimefaces
prain99
prain99

Reputation: 23

Primefaces p:selectBooleanCheckBox does not show the check mark

Primefaces p:selectBooleanCheckBox does not display the Check Mark when clicked. We have for example:

<p:dataTable>
....
  <p:column selectionMode="multiple" </p:column>
......
</p:dataTable>

What this renders is

<TABLE role="grid">
  <THEAD id="displayForm:tblPositionList_head">
  <TR role="row">
   <TH class="ui-state-default ui-selection-column" id="displayForm:tblPositionList:j_idt166" 
   role="columnheader" style="width: 13px; text-align: center;" 
  scope="col"><SPAN class="ui-column-title"></SPAN>
  <DIV class="ui-chkbox ui-chkbox-all ui-widget">
  <DIV class="ui-helper-hidden-accessible"><INPUT name="displayForm:tblPositionList_checkbox" 
  aria-checked="false" aria-label="Select All" type="checkbox"></DIV>
  <DIV class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><SPAN 
  class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></SPAN></DIV></DIV></TH>
  <TH class="ui-state-default" id="displayForm:tblPositionList:j_idt167" 
  role="columnheader" style="width: 30px;" aria-label="Details" 
  scope="col"><SPAN class="ui-column-title">Details</SPAN></TH>
  <TH class="ui-state-default" id="displayForm:tblPositionList:j_idt169" 
  role="columnheader" style="width: 51px; text-align: center;" aria-label="Edit" 
  scope="col"><SPAN class="ui-column-title">Edit</SPAN></TH>
  <TH class="ui-state-default" id="displayForm:tblPositionList:j_idt170" 
  role="columnheader" style="width: 51px; text-align: center;" aria-label="Delete" 
  scope="col"><SPAN class="ui-column-title">Delete</SPAN></TH>

But the above does not show the check mark when clicked. Note however that the functionality works well - which means it really checks and unchecks. Just the display of the check mark is not.

Upvotes: 1

Views: 940

Answers (2)

MacNord
MacNord

Reputation: 141

Actually the check mark is there but it is white on a white background - barley visible! I had / wanted to continue using the Boostrap Theme.

Only a CSS style override in my own.css file included in the template could bring the checkbox tick back to black color.

.ui-state-highlight .ui-icon {
    background-image:url("/your/path/resources/images/ui- 
    icons_333333_256x240.png?ln=primefaces-bootstrap&v=10.0.0&e=10.0.0");
 }
 in the template
 <h:head><link href="/reg/css/own.css" rel="stylesheet" /></h:head>

Overrides ui-icons_ffffff_256x240.png out of the theme.css.

Upvotes: 1

stefan-dan
stefan-dan

Reputation: 604

Check the primefaces theme in the web.xml

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>none</param-value>
</context-param>

If the theme is set to none, then the checkmark will not be shown.

You can use a theme, or replace all

<p:selectBooleanCheckBox>

with

<h:selectBooleanCheckBox>

Then the component will be rendered with the default browser style.

Upvotes: 2

Related Questions