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

  • Profile Image
    wallace.stevens
    Asked 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
    ashwin_d
    Answered 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
    wallace.stevens
    Answered 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
    ashwin_d
    Answered 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
    ImmediaSignup
    Answered 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
    ashwin_d
    Answered 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!