How to change configurable list widget textbox width

Hi everyone,

I am using a configurable list widget and need to reduce the width so that all my columns fit into my form. Can you please let me know what CSS code to use? I tried code below that you posted for someone with a similar issue, but it didn't do anything to my list.

select {

width: 80px !important;

}

This is my form: https://form.jotform.com/70254820764961

Thanks for any help!

Maria Arraiz

 

Please follow the guide here 

Example on your form I added the custom CSS code to the widget.

result:

 

Hope this help. Let us know if this did not work for you.

Hi Jonathan,

Thanks for your prompt response! Unfortunately, it didn't work. I can know see it properly in the section Build, but when I preview the form, the columns doesn't fit. Please let me know.

Thanks again,

Maria Arraiz

We apologize for the inconvenience caused.

I was able to reproduced the issue with the custom CSS code on configurable list widget not being saved and applied when using the JotForm V4 builder.

Ex:

 

The workaround I suggest you do for now to fixed it is to switch to the JotForm V3 temporarily.

#1 Update the configurable list widget by injecting the custom CSS codes

 

 

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

td.col1 input[type="text"]{

 width:100px;

}

td.col2 input[type="text"]{

 width:150px;

}

td.col3 input[type="text"]{

 width:100px;

}

td.col4 input[type="text"]{

 width:50px;

}

td.col5 input[type="text"]{

 width:50px;

}

td.col6 input[type="text"]{

 width:100px;

}

#2 Save the widget. 

#3 Save the form.

The custom CSS code show work on the live form.

Ex:

 

You can switch back to JotForm V4 as needed.

Let us know how it goes.

 

 

It worked! Thanks so much!

Best,

Maria