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

    [Configurable List Widget] Is there a way to customize the column widths individually

    Asked by wallace.stevens on January 08, 2015 at 06:28 PM
    And/or is there a way to customize the column widths individually instead of having them all the same size?
  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 08, 2015 at 10:36 PM

    Hello,

    Yes it is possible to change the width of the Configurable List widget by adding custom css code in form. 

    Do you want to change the configurable list widget width of your form "GSA Form 2151 Records Inventory"?

    Please find below the sample custom css code to change the width of your configurable list widget columns:

    table#list {width: 100% !important;}

    .radio-container, .checkbox{width:200px !important;}

    textbox, textarea, select{width:200px !important;}

     

    You can also change the width of the columns as well.

    td.col1 {

    width: 177px !important;

    }

    You seems to have 10 columns in your widget. For every columns, the number need to be changed which is highlighted in above sample code. Here are the list of column names you need to add:

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10 and after the column name you need to add the width css code as below:

    {width: 177px !important;}

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by wallace.stevens on January 13, 2015 at 10:50 AM

    This is fantastic!  Thank you.  T

    here is only one more thing I need to make this form awesome for what I am trying do.  I have the data being captured into a Google sheet but to my horror the information captured from the configuration list widget is all mashed into on field in my Google sheet. I need the data in the configuration list to be in its own column in Google sheets or excel etc.  Is there a way to do this with using CSS or another means (besides manually)?
  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 13, 2015 at 11:38 AM

    Hello wallace.stevens,

    You are welcome and I'm very pleased that I was able to help you.

    Unfortunately we cannot answer multiple question in one thread. I have moved your other unrelated question to a new thread and you will be answered here:  http://www.jotform.com/answers/495243 

    Thank you!

  • Profile Image

    Answered by ImmediaSignup on February 17, 2015 at 10:27 AM

    Hi,

     

    I've tried to follow these guidelines for my form (http://form.jotformeu.com/form/50193285734357?) but it seems I can't get the columns to work.

    Form is here : http://www.jotform.com//?formID=50193285734357#

    I've tried :

     

    table#list {width: 100% !important;}

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10, td.col11, td.col12{

    width: 70px !important;

    }

     

    As well as just 

    td.col1 {

    width: 177px !important;

    }

    But nothing seems to move the widths. Am I doing something wrong? Sorry for putting this on this thread, but didn't want to open a new thread when the question relates to this answer.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 17, 2015 at 11:44 AM

    Hello ImmediaSignup,

    Even though your question is related but it is a separate question related to your form. I did took a quick look of your form and it seems you have not added custom css code in widget as mentioned in my answer above.

    I have moved your question to a new thread and you will be answered here:  http://www.jotform.com/answers/517576 

    Thank you!