How to customize the field/column width of configurable list widget?

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

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 :)

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

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

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.