How to change configurable list widget textbox width

  • Profile Image
    marraiz
    Asked 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
    jonathan
    Answered 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
    marraiz
    Answered 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
    jonathan
    Answered 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
    marraiz
    Answered on January 26, 2017 at 03:50 PM

    It worked! Thanks so much!

    Best,

    Maria