Configurable List Widget: how to customize the columns width with custom CSS code injection.

Hi - on the form linked below, I am trying to format the Configurable List used in question 7. I'd like to do two things:

1) make the textareas in the two columns different widths. For example, I'd like the first column to be 300px and the second to be 600px. What code do I need to use in the CSS of the widget?

2) I'd like the Column labels to be underneath the textareas instead of above. I want them to essentially look like a sub-label

Any help you can give is greatly appreciated!

We will be glad to assist you. 

1) Please inject the following code in the Configurable List widget: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

.col1 > textarea{

    width: 300px !important;

}

.col2 > textarea{

    width: 600px !important;

}

Result:

2) In regards to moving the row below the TextArea field, that will not be possible, as it will apply only to one of the row. However, we can display content through CSS code to make it look as a sub-label, example:

td.col1:after {

content: "Name, Position, Affiliation";

}

td.col2:after {

content: "Role";

}

Result:

If you want to hide the main header, inject this code:

th {

    visibility: hidden;

}

Please note that all these codes need to be injected in the widget as explain on the previous guide. Let us know if you need more help, we will be glad to assist you.

Sorry, this is the correct guide to inject the CSS code on widgets: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

Hi - thank you so much! How can I resize other field types in the Configurable widget? If i want to increase the height and width of, say, a time field?

Here is the code to increase the height and width of a time field in Configurable List widget:

select.h, .m{

    width: 80px;

    height:30px;

}

.h  -  selector for hours field

.m  -  selector for minutes field

.ampm - selector for AM/PM field

Thank you, i also want to just increase the space between each of the columns - between the textarea and the Start Time(s) column, and then between the Start Time(s) and the End Time(s). We'll say 20px.

i cant seem to get it to work.

Are you referring to this widget's column space? I have injected custom CSS to induce a Gap of 30px between them. If you want then you can increase the Gap by increasing the pixels.

#list > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1){
padding-right:30px !important;
}

Let us know if you have further questions.

Thanks.