XPages checkboxgroup styling

Question

The following is my code for a basic checkbox group in XPages:

<div class="checkbox">
    <xp:checkBoxGroup id="checkBoxGroup1">
        <xp:selectItem itemLabel="First" itemValue="1"></xp:selectItem>
        <xp:selectItem itemLabel="Second" itemValue="2"></xp:selectItem>
        <xp:selectItem itemLabel="Third" itemValue="3"></xp:selectItem>
    </xp:checkBoxGroup>
</div>

When I preview the XPage, I only see the labels. The checkbox is missing. If I remove the div with the Bootstrap class (checkbox), the checkboxes appear.

Would someone clue me in to what I should do if I want to add the Bootstrap class to the checkbox group?

Thanks,

Dan

I see the necessary of using a <div> element, but what if you add the boostrap class for the checkBoxGroup element? — Florin M.

Lothar Mueller Lothar Mueller · Accepted Answer · 2017-02-23T10:51:03

If you look at the outcome using your browser's source code viewer you'll probably see something like this:

<div class="checkbox">
  <fieldset id="view:_id1:checkBoxGroup1" class="xspCheckBox" onchangeTrigger="early-onclick">
    <table role="presentation" class="xspCheckBox">
      <tr>
        <td>
          <label for="view:_id1:checkBoxGroup1:0">
            <input id="view:_id1:checkBoxGroup1:0" name="view:_id1:checkBoxGroup1" value="1" type="checkbox">First
          </label>
        </td>
        <td>
          <label for="view:_id1:checkBoxGroup1:1">
            <input id="view:_id1:checkBoxGroup1:1" name="view:_id1:checkBoxGroup1" value="2" type="checkbox">Second
          </label>
        </td>
        <td>
          <label for="view:_id1:checkBoxGroup1:2">
            <input id="view:_id1:checkBoxGroup1:2" name="view:_id1:checkBoxGroup1" value="3" type="checkbox">Third
          </label>
        </td>
      </tr>
    </table>
  </fieldset>
</div>

You see that the XSP engine is creating a table for you, and I am rather confident that this is what's causing trouble, as bootstrap is probably not expecting a table within a checkbox block.

Maybe you can try to use singular checkbox controls instead. If that is working as expectedyou could try to get rid of the table around the CB group, maybe using a customRenderer or some thing like that

XPages checkboxgroup styling

1 Answers