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 customize the field/column width of configurable list widget?

    Asked by ImmediaSignup on February 17, 2015 at 11:44 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

    configurable list config list CSS CSS layout widget CSS
  • Profile Image

    Answered by Ben on February 17, 2015 at 01:11 PM

    Always feel free to open a new thread since if it is a thread of someone else, then they would get the email about each response that is made, plus this way we can properly assist you in resolving your issue and helping you as much as needed.

    Now in regards to the width, could you please tell us which configurable list you would like to style?

    The reason why I ask is to give you a better code for what you are after, but I will still provide you with general rule when styling it as it might help you do that (since you seem familiar with CSS and HTML).

    Now we can set the width of the column, but as it is a table, it will respect the content in it as well, so sometimes we need to change the width of the element as well.

    Lets take that it is a textbox in that column.

    What we do is set it up like this:

    input[type="text"] {
       width: 70px;
    }

    Once we have that in the custom CSS field of your widget (I looked in configurable list widgets and was not able to find your code above in these fields), we can then style them. Do note that we will not be able to style them if we add the CSS code to the Form Builder CSS field itself.

    To add it, click on the quick action bar's Wizard wand icon:

    Once you do scroll down to the custom CSS field and add the CSS code to it:

    OK, so to expand a little on the code above (it would resize all of the input boxes on that configurable widget.

    We could add code such as this one to style all of them together:

    td, input {
        width: 70px;
    }

    If by some chance you need to style 4th column differently (this applies to any number, I took 4 as an example), then you can do so by adding this code right under that one above - for all.

    td+td+td+td, td+td+td+td input {
        width: 130px;
    }

    or

    td:nth-child(4), td:nth-child(4) input {
        width: 130px;
    }

    Do try it out and let us know if there is some field that you need help with and we will be happy to jump in and assist :)

  • Profile Image

    Answered by ImmediaSignup on February 25, 2015 at 08:35 AM

    HI,

     

    Thans for your response. I tried the above, but it still didn't change the fields. 

     

    I've cloned the form for now and left the configurable list viewable, so please can you have a look and let me know where I'm going wrong. 

    http://form.jotformeu.com/form/50552990974365

     

    Thanks

     

    Shaun

  • Profile Image

    Answered by ImmediaSignup on February 25, 2015 at 08:45 AM

    Got it sorted, thanks. I'd forgotten something to add in there.

  • Profile Image

    Answered by Ben on February 25, 2015 at 10:23 AM

    Great to hear that Shaun and thank you for the update :)

    Do let us know if you have any further questions and we would be happy to assist.