jsfcheckboxprimefacesstylingselectmanycheckbox

JSF2 or primefaces p:selectManyCheckbox styling with icons


One question who styled manycheckboxes with icons?

<p:selectManyCheckbox value="#{Step4Bean.selectedItems}" id="tag-list" >
                        <f:selectItems value="#{Step4Bean.allItems}" var="item" itemLabel="#{item}" itemValue="#{item}"/>
                    </p:selectManyCheckbox>

I have check boxes with 6 items , I must have 2 rows with 3 items in each row, near each item must be one icon. How we can solve this? Here is a output example link

http://jpeg.am/images/?i=5692b9db7ea1d060bc7c97bcc788d6b8.jpg


Solution

  • PF already had the Grid layout for this component.

    <h3>Grid Layout</h3>
    <p:selectManyCheckbox id="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="3">
        <f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
    </p:selectManyCheckbox>
    

    But the latest PF 5.2.3 and 5.3-SNAPSHOT has custom layout options

    <h3>Custom Layout (since v5.2.3)</h3>
    <p:outputPanel id="customPanel" style="margin-bottom:20px">
        <p:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom">
            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
            <f:selectItem itemLabel="PS4" itemValue="PS4" />
            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
        </p:selectManyCheckbox>
    
        <div class="ui-grid ui-grid-responsive">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4">
                    <p:checkbox id="opt1" for="custom" itemIndex="0" />
                </div>
                <div class="ui-grid-col-4">
                    <p:checkbox id="opt2" for="custom" itemIndex="1" />
                </div>
                <div class="ui-grid-col-4">
                    <p:checkbox id="opt3" for="custom" itemIndex="2" />
                </div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4">
                    <h:outputLabel for="opt1" value="Xbox One" />
                </div>
                <div class="ui-grid-col-4">
                    <h:outputLabel for="opt2" value="PS4" />
                </div>
                <div class="ui-grid-col-4">
                    <h:outputLabel for="opt3" value="Wii U" />
                </div>
            </div>
        </div>
    </p:outputPanel>
    

    Not sure how and if the latest functionaly can be used with an <f:selectItems/> or only with multiple <f:selectItem/>. I suspect the latter

    See also: - See http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml

    (examples taken from the PF showcase!)