How to format configurable list widget?

  • Profile Image
    etiennekh
    Asked on April 22, 2016 at 11:02 AM

    I need to format configurable list into 2 lanes: 

     

    First lane:

    label: Target Protein/Gene/Locus - answer: dropdown list (LDLR Deficiency Null HoFH, LDLR Deficiency Non Null HoFH, Compound Null/Non Null LDLR and/or APOB)

    label: Total N - answer: number

    label: N < 18y. - answer: number.

    Second lane:

    label: If Others, please specify - answer: text area

    Third lane:

    label: Do you have a biobank (collection of biological samples) for this disease? - answer: radiobotton (Yes, No)

    label: If Yes: - answer: Checkbox (DNA, Plasma or Serum) and textbox (or others (specify)) 

     

    Thank you! 

  • Profile Image
    Nik_C
    Answered on April 22, 2016 at 12:57 PM

    I'm working on this for you and I'll get back to you as soon as I finish it.

    Thank you!

  • Profile Image
    Nik_C
    Answered on April 22, 2016 at 03:21 PM

    I think I manage to do something for you. This is my test form that you can clone or test by yourself: https://form.jotform.com/61096103740953.

    Please copy this code inside of your Custom CSS code for your Configurable list widget:

    .d {

    display:none;

    }

    th {

        display: none;

    }

    tr {

    display: block;

    }

    td.col4:before {

    content:"If Others:";

    display:block;

    }

    td.col4 {

     display: block;

     position: relative;

     top: 50px;

     left: 2px;

    }

    td.col5:before {

    content:"Do you have a biobank for this disease?";

    dispaly:block;

    }

     

    td.col5 {

        display: block;

        position: relative;

        top: 80px;

        left: 2px;

    }

    td.col6:before {

    content:"If Yes:";

    display:block;

    }

    td.col6 {

        display: block;

        position: relative;

        top: 20px;

        left: 260px;

    }

    td.col7:before {

    content:"Other:";

    display:block;

    }

    td.col7 {

        display: block;

        position: relative;

        top: 40px;

        left: 255px;

    }

    td.col1:before {

    content:"Target Protein/Gene/Locus";

    display:block;

    }

    td.col2:before {

    content:"Total N";

    display:block;

    }

    td.col3:before {

    content:"N < 18y";

    display:block;

    }

    Here is where you copy the above CSS code:

     

    Hope it helps, please let me know if you have any further questions.

  • Profile Image
    etiennekh
    Answered on April 25, 2016 at 11:23 AM

    Thank you So much!! This really Helped!!

  • Profile Image
    Nik_C
    Answered on April 25, 2016 at 12:29 PM

    You're welcome.

    I'm glad I was able to help you.

    Cheers!