Display 4 checkboxes on one line instead of all checkboxes on one line

Question

I have created web-application using JSF 2.0 where I have checkbox to select as h:selectManyCheckbox. Below is what I have as code

<h:selectManyCheckbox value="#{UserRegistration.pagesSelected}" id="myPages">
    <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
    <f:selectItem itemValue="success" itemLabel="Register New Project" />
    <f:selectItem itemValue="getReportss" itemLabel="Patent Reports" />
    <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project" />
    <f:selectItem itemValue="addUserss" itemLabel="Add User Account" />
    <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log" />
    <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users" />
</h:selectManyCheckbox>

Output I get is

[] Register New Applicant [] Register New Project [] Patent Reports [] Search For Project [] Add User Account [] System Log [] Details Of Registered Users

The problem is This is on ONE LINE.

What I want is as below.

[] Register New Applicant [] Register New Project [] Patent Reports [] Search For Project
[] Add User Account [] System Log [] Details Of Registered Users

i.e. 4 checkboxes on one line....

Any idea how to get this done?

Edit 1

HTML generated output is

<table id="myPages">
    <tr>
<td>
<input name="myPages" id="myPages:0" value="registerForPatentss" type="checkbox" checked="checked" /><label for="myPages:0" class=""> Register New Applicant</label></td>
<td>
<input name="myPages" id="myPages:1" value="success" type="checkbox" checked="checked" /><label for="myPages:1" class=""> Register New Project</label></td>
<td>
<input name="myPages" id="myPages:2" value="getReportss" type="checkbox" checked="checked" /><label for="myPages:2" class=""> Patent Reports</label></td>
<td>
<input name="myPages" id="myPages:3" value="searhPatentss" type="checkbox" checked="checked" /><label for="myPages:3" class=""> Search For Project</label></td>
<td>
<input name="myPages" id="myPages:4" value="addUserss" type="checkbox" checked="checked" /><label for="myPages:4" class=""> Add User Account</label></td>
<td>
<input name="myPages" id="myPages:5" value="logPatentSystemss" type="checkbox" checked="checked" /><label for="myPages:5" class=""> System Log</label></td>
<td>
<input name="myPages" id="myPages:6" value="userlistss" type="checkbox" /><label for="myPages:6" class=""> Details Of Registered Users</label></td>
    </tr>
</table>

Doesn't answer your question, but can't you limit the table width with css? It won't be *exactly* 4 checkboxes per line, but maybe pretty close. — RinaldoDev, Oct 05 '12 at 19:42

score 1 · Accepted Answer · answered Oct 05 '12 at 19:51

1

Take a look at tomahawk's <t:selectManyCheckbox> with a straightforward usage description e.g. here.

answered Oct 05 '12 at 19:51

jarek.jpa

565
1
5
18

yes, I also found same [here](http://www.coderanch.com/t/523945/JSF/java/align-items-inside-selectManyCheckbox) – Fahim Parkar Oct 05 '12 at 19:57

score 1 · Answer 2 · answered Oct 07 '13 at 15:20

You can do it with CSS:

    <style type="text/css">
        .cb table {
            width: 100%;
        }

        .cb tr {
            display: inline;
        }

        .cb td {
            display: inline-block;
            width: 24%;
        }
    </style>

    <h:form>
        <div class="cb">
            <h:selectManyCheckbox value="#{UserRegistration.pagesSelected}" id="myPages">
                <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
                <f:selectItem itemValue="success" itemLabel="Register New Project"/>
                <f:selectItem itemValue="getReportss" itemLabel="Patent Reports"/>
                <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project"/>
                <f:selectItem itemValue="addUserss" itemLabel="Add User Account"/>
                <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log"/>
                <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users"/>
            </h:selectManyCheckbox>
        </div>
    </h:form>

very good solution 0.0, in my opinion better than tomahawk lib — Eddie Martinez, Oct 15 '14 at 18:50

score 0 · Answer 3 · answered Oct 05 '12 at 19:59

Used tomahawk's lib

xmlns:t="http://myfaces.apache.org/tomahawk"

<t:selectManyCheckbox value="#{UserRegistration.pagesSelected}" id="myPages" layout="pageDirection"  layoutWidth="4">
    <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
    <f:selectItem itemValue="success" itemLabel="Register New Project" />
    <f:selectItem itemValue="getReportss" itemLabel="Project Reports" />
    <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project" />
    <f:selectItem itemValue="addUserss" itemLabel="Add User Account" />
    <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log" />
    <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users" />
</t:selectManyCheckbox>

Display 4 checkboxes on one line instead of all checkboxes on one line

Edit 1

3 Answers3

Reference