How do I start a new row on Configurable List, so I have 6 rows already set?

I want to have the following 2 fields over 6 rows

Section                                        Number of Participants

check box with Tinies title             Number box

check box with Subbies title          Number box

check box with Juniors title           Number box

check box with Inters title             Number box

check box with Seniors title           Number box

check box with Masters title          Number box

It is possible to set a number of rows by default in the Configurable List widget. Here's how:

Select the Configurable List widget and then click the "Widget Settings" button. The widget wizard will appear, scroll down and you'll see the "Minimal rows number" option. Put "6" in the field and then click the "Update Widget" button.

Related guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

Hope that helps. Thank you.

Thank you I now have 6 rows,  but I'd like to have each row with a different checkbox title NOT the same title.  How do I change this?

Thank you for the clarification. For your requirement, you will need to setup all the checkbox and number box in the configurable list, so it will first appear in one row as seen below:

Then we can provide custom CSS code to have each checbox and number box into separate rows. Since this will require customization, you will need to first setup the boxes and number fields with all the appropriate checkbox titles. Let us know on this thread once you have done so and we will provide the appropriate code after.

You can check out this guide for more info: How to Set Up the Configurable List Widget

I will wait for your response.
Regards.

Ok.  Yes I have set up all the fields I require.

Hi,

If you are done to set up all the fields you require, we can now proceed to your form customization. Please allow me some time to work on this. I'll get back once I'm done.

Regards

Hi again,

Please follow the instructions below to achieve this:

1. From the Widget Settings, set the Minimal Rows Number into 1. Also set the Maximal Rows Number into 1 to get rid of the "+" sign below.

2. Set the width of the widget to 600.

3. Inject this custom CSS in the widget.

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

th { display: none; }

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10, td.col11, td.col12, td.col13 {

display:inline-block;

float: left;

padding: 20px 10px 1px 1px;

}

input[type="text"], select, .stepper-wrap input.stepper { width: 100%; }

td.col1:before { content: "Section "; width: 50%; }

td.col2:before { content: "Number of Participants "; width: 40%; }

td.col3:before { content: "Section  "; width: 50%; clear: left; }

td.col4:before { content: "Number of Participants "; width: 40%; }

td.col5:before { content: "Section  "; width: 50%; }

td.col6:before { content: "Number of Participants  "; width: 40%; }

td.col7:before { content:" Section  "; width: 50%; clear: left; }

td.col8:before { content: "Number of Participants "; width: 40%; }

td.col9:before { content: "Section "; width: 50%; clear: left; }

td.col10:before { content: "Number of Participants "; width: 40%; }

td.col11:before { content: "Section  "; width: 50%; clear: left;}

td.col12:before { content: "Number of Participants "; width: 40%; }

td.col13:before { content: "Section "; width: 50%; clear: left; }

td.col1 { width: 50%; }

td.col2 { width: 40%; }

td.col3 { width: 50%;  clear: left;}

td.col4 { width: 40%; }

td.col5 { width: 50%; }

td.col6 { width: 40%;}

td.col7 { width: 50%; clear: left;}

td.col8 { width: 40%; }

td.col9 { width: 50%; clear: left;}

td.col10 { width: 40%; }

td.col11 { width: 50%; clear: left;}

td.col12 { width: 40%; }

td.col13 { width: 50%; clear: left;}

Result:

Let us know if you need furthter assistance.
Regards

Thank you for your responses.  I have set up the configurable list like I wanted, however, I now have three issues. 

1.  When I go to preview the form, the titles (Section and Number of Participants) don't show up.  I also had to change the please select to just select, as the drop down number box shortens when in preview mode.

2. 

3. 

Can you help me with any of these issues?

Thanks

I was able to replicate the issue. The titles are not showing in the preview or live form. Please give me more time to investigate about this issue. I will contact you once I have a solution.

I created a separate thread for your PDF issue and email issue. Please wait for our reply to these threads:

https://www.jotform.com/answers/1057933
https://www.jotform.com/answers/1057936

Thank you for understanding.

Thank you for patiently waiting. Please try the following steps:

1. Please try going back to JotForm V3 by clicking the "Switch to JotForm V3" button at the top left.

2. In the Form Builder V3, select the Configurable List widget and then click the wand icon.

3. Go the "Custom CSS" tab and paste the same CSS code provided by Christian above. Click the "Update Widget" button when you're done.

4. Save and the form and verify the changes.

5. You can now go back to Form Builder V4 by changing the settings in My Account Settings page.

Hope that helps. Thank you.

ok, now the configurable list has messed up!  I tried doing what Jan said in the last thread.  I don't know what version I was working with, but couldn't work out how to go back to JotForm V3, so just opened JotForm4.0 and then edited in my account settings.  The CCS code I re-pasted from Christian is now not working.  Please help. 

Also the images don't show up on Jan's last thread post. Below are images of the original version I was using, then the other one I opened up in after that.

FYI I'm working on a Surface Pro 4

Another question related to the configurable list is......

Can I add a hover box that gives instructions on what should be completed for this form element, like I can for other elements?

Can I add a hover box that gives instructions on what should be completed for this form element, like I can for other elements?

Unfortunately it is not possible to add a hover box into the configurable list. A possible alternative would be to add a hint text for your textboxes by adding  another colon and entering the hint that you want to display. Here's an example (Text Area : textarea : Hint Text).

With regards to your issue with the configurable list, please allow me some time to investigate this further. I will get back to you once I am done checking.
Thank you.

Hello again,

To resolve the issue, please remove all the CSS in the Configurable List widget and replace it with the one that I updated below:

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

th { display: none; }

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10, td.col11, td.col12, td.col13 {

display:inline-block;

float: left;

padding: 20px 10px 1px 1px;

}

input[type="text"], select, .stepper-wrap input.stepper { width: 100%; }

td.col1:before { content: "Section "; width: 20%; }

td.col2:before { content: "Number of Participants "; width: 30%; }

td.col3:before { content: "Section  "; width: 20%; clear: left; }

td.col4:before { content: "Number of Participants "; width: 30%; }

td.col5:before { content: "Section  "; width: 20%; }

td.col6:before { content: "Number of Participants  "; width: 30%; }

td.col7:before { content:" Section  "; width: 20%; clear: left; }

td.col8:before { content: "Number of Participants "; width: 30%; }

td.col9:before { content: "Section "; width: 20%; clear: left; }

td.col10:before { content: "Number of Participants "; width: 30%; }

td.col11:before { content: "Section  "; width: 20%; clear: left;}

td.col12:before { content: "Number of Participants "; width: 30%; }

td.col13:before { content: "Section "; width: 20%; clear: left; }

td.col1 { width: 20%; }

td.col2 { width: 30%; margin-right: 33% }

td.col3 { width: 20%;  clear: left;}

td.col4 { width: 30%; margin-right: 33%  }

td.col5 { width: 20%; }

td.col6 {  width: 30%; margin-right: 33% }

td.col7 { width: 20%; clear: left;}

td.col8 {  width: 30%; margin-right: 33%  }

td.col9 { width: 20%; clear: left;}

td.col10 {  width: 30%; margin-right: 33%  }

td.col11 { width:20%; clear: left;}

td.col12 {  width: 30%; margin-right: 33%  }

td.col13 { width: 20%; clear: left;}

Here's the result:

Please note that some of the fields may appear skewed on preview, but if you view the form using the direct link, all the fields should be aligned. Here's an example: https://form.jotform.com/70380252754959 

Regards.

Still not working.  This is how it looks now.  I tried previewing it in different ways and still the same.  Tried changing versions and clicking on the direct link too.

Please give me more time to work on this issue. I will contact you once I have a solution. Thank you.

Thank you for waiting. It seems that the CSS code above doesn't have a semi-colon ";" at the end of some declaration. However, the demo form above is showing the headers properly.

I would recommend you to just clone the form created by my colleague Christian. Here's the link: https://form.jotform.com/70380252754959.

Here's a guide on How-to-Clone-an-Existing-Form-from-a-URL.

Hope that works. If you need further assistance, let us know.