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

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.

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.

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!

 

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.