Configurable List Widget: How to create new lines with CSS Codes?

  • Profile Image
    TaylorBeaumont
    Asked on December 05, 2016 at 06:32 AM

    G'day Jotfrom Wizards,

    I recently made the jump from Google Forms and am loving Jotform. I'm kicking myself for not finding it sooner.

    I have created a configurable list, and I want each section to be on a new line. What CSS do I need for that?

    You can find my form here: https://form.jotform.co/63393072713859

    I also want the days (radio buttons) to appear horizontally in the form. 

    Thank you in advance!

    Taylor.

  • Profile Image
    candy
    Answered on December 05, 2016 at 07:10 AM

    Hello Taylor,

    I have checked your form and cloned it in order to test it on my side.

    The "Configurable List" widget has been created as an HTML table. Unfortunately, you can not change this feature with CSS codes.

    If you want, you can use normal form fields for the same form instead of a configurable list widget as the following screenshot:

    Please check. If you need further assistance, do not hesitate to contact us.

    Thank you.

  • Profile Image
    TaylorBeaumont
    Answered on December 05, 2016 at 06:21 PM

    Hey Candy, thank you for the quick response!

     

    Which part of what I want is not achievable with the Configurable List?

     

    Also, I could do it that way, but I would need each of those sections repeatable, because often clients have more than 1 special. Is there a way to make that section repeatable when they're filling in the form?


    Cheers!

  • Profile Image
    BJoanna
    Answered on December 06, 2016 at 01:33 AM

     

    Do you want to achieve something like this?

    If so, please add this CSS code to Configurable list CSS field:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    tr {

         height: 380px!important;

    }

    #list > tbody > tr:first-child {

        display: none;

    }

    td.col1:before {

         content: "Special Information";

         display: block;

    }

    td.col2:before {

         content: "Start ";

         display: block;

    }

    td.col3:before {

         content: "Finish ";

    display: block;

    }

    td.col4:before {

         content: "Days Available";

         display: block;

    }

    .col2 {

    float: left!important; 

        top: 70px!important;

        left:-150px!important;

    position: relative;

    }

    .col3 {

        left: -375px!important;

    float: right;

        top:120px!important;

    position: relative;

    }

    .col4 {

        left: -280px!important;

        top: 180px!important;

    position: relative;

    float: left!important;

    }

    Here is my demo form: https://form.jotform.com/63400409880958 

    Feel free to clone it.

     

    Hope this will help. Let us know if you need further assistance.