-
wdbosAsked on February 5, 2017 at 7:45 AM
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
-
JanReplied on February 5, 2017 at 1:06 PM
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.
-
wdbosReplied on February 5, 2017 at 7:08 PM
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?
-
Chriistian Jotform SupportReplied on February 6, 2017 at 12:16 AM
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. -
wdbosReplied on February 6, 2017 at 12:20 AM
Ok. Yes I have set up all the fields I require.
-
Chriistian Jotform SupportReplied on February 6, 2017 at 1:37 AM
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
-
Chriistian Jotform SupportReplied on February 6, 2017 at 2:58 AM
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 -
wdbosReplied on February 6, 2017 at 10:51 AM
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.
When sending/receiving a submission, the data in the configurable list doesn't show up clearly or cuts off in a PDF document. It would be better if the PDF document was in landscape.3.
The email response doesn't show clearly and stretches too wide across the screen, due to the configurable list data.Can you help me with any of these issues?
Thanks
-
JanReplied on February 6, 2017 at 12:29 PM
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/1057936Thank you for understanding.
-
JanReplied on February 6, 2017 at 8:40 PM
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.
-
wdbosReplied on February 7, 2017 at 10:00 PM
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.
-
wdbosReplied on February 7, 2017 at 10:06 PM
FYI I'm working on a Surface Pro 4
-
wdbosReplied on February 7, 2017 at 10:22 PM
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?
-
Chriistian Jotform SupportReplied on February 8, 2017 at 12:13 AM
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. -
Chriistian Jotform SupportReplied on February 8, 2017 at 12:32 AM
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.
-
wdbosReplied on February 8, 2017 at 12:56 PM
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.
-
JanReplied on February 8, 2017 at 2:14 PM
Please give me more time to work on this issue. I will contact you once I have a solution. Thank you.
-
JanReplied on February 8, 2017 at 6:38 PM
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.