How do I make a sub list for checklist?

  • Profile Image
    BBC2016
    Asked on May 31, 2016 at 04:30 AM
    Hwo do I make a sub list for checklist? HOW>>>???
  • Profile Image
    beril
    Answered on May 31, 2016 at 05: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.

  • Profile Image
    BBC2016
    Answered on June 01, 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????

  • Profile Image
    liyam
    Answered on June 01, 2016 at 01: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;
    }

  • Profile Image
    BBC2016
    Answered on June 02, 2016 at 01:44 AM

    soooo perfect!! thanks to you!