-
BBC2016Asked on May 31, 2016 at 4:30 AM
-
beril JotForm UI DeveloperReplied on May 31, 2016 at 5:06 AM
Hello again;
Currently, it is not possible to create sub options for checkbox field. However, we can show sub options by injecting CSS code and by the help of conditions.
First of all, we need to add our sub-options as you see below:
Then, you can inject the CSS code below:
span.form-checkbox-item {
width : 100%;
position : relative!important;
margin-left : -100px !important;
}
div.form-single-column {
width : 100%;
}
input.form-checkbox {
float : right;
}
#input_32_1 , #input_32_2, #input_32_4 {
display : block !important;
width : 450px !important;
}
And finally, you can show/hide your sub-options with conditions.
https://www.jotform.com/help/196-Hide-or-Show-Multiple-Fields-at-Once
If you have any question or issues, please do not hesitate to contact us. We will be glad to assist you.
-
BBC2016Replied on June 1, 2016 at 12:56 PM
it looks like a gigantic mess when i add in your codes....what happen> the checkboxes are scattered through the page. Please clone and show me??? please????
-
liyamReplied on June 1, 2016 at 1:54 PM
Hello BBC2016,
To make this work out better, can you provide us a list which ones are to be indented (sub) and which ones are to be parent items? This way we can provide a better solution on your form for which you can simply just copy right after.
We'll be looking forward to your response.
Edit: Here's my code for this one. If you would like to indent the 2nd checkbox, you can try this code
#cid_32 .form-single-column span:nth-child(2) {
margin-left: 20px;
}Simply add a new CSS code and just replace that number after the nth-child with the element in the list you wanted to be indented.
Example: This code will indent the 2nd and 3rd element
#cid_32 .form-single-column span:nth-child(2) {
margin-left: 20px;
}
#cid_32 .form-single-column span:nth-child(3) {
margin-left: 20px;
} -
BBC2016Replied on June 2, 2016 at 1:44 AM
soooo perfect!! thanks to you!