What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to change configurable list widget textbox width

    Asked by marraiz on January 26, 2017 at 01:41 PM

    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

     

  • Profile Image
    JotForm Support

    Answered by jonathan on January 26, 2017 at 02:23 PM

    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.

  • Profile Image

    Answered by marraiz on January 26, 2017 at 03:03 PM

    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

  • Profile Image
    JotForm Support

    Answered by jonathan on January 26, 2017 at 03:23 PM

    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.

     

     

  • Profile Image

    Answered by marraiz on January 26, 2017 at 03:50 PM

    It worked! Thanks so much!

    Best,

    Maria