Infinite List Column Width

Hello,

I have an infinite list widget in my form. 

It has 5 columns - I want the 5th column to be significantly wider than the rest.

How can I customise the width? 

Thanks

I have checked your linked form, Kate, and I do not see the Infinite List widget being used on your form.

Your form currently has 12 widgets on it: Form Tabs, Progress Bar, Check Input, Configurable List (2 times), Masked Input (5 times), Matrix Dynamique, Dynamic Fields.

The only one of all these widgets that has 5 columns is the Matrix Dynamique widget, found on the Investments tab:

Can you please confirm whether this is the field you would like to widen, or are you looking to widen a field in another widget?

We look forward to your response.

Hi, 

I'm sorry, I need to send it out today, so I replaced it with a configurable list widget. 

The same question applies, just with the 4th column. 

Thanks,
Kate

It's no problem, Kate. To widen this field, you can try using the following custom CSS inside the Configurable List widget:

.col1 { width: 20%; }
.col2 { width: 20%; }
.col3 { width: 20%; }
.col4 { width: 35%; }
input { width: 96% !important; }
textarea { width: 96%; height: 50px; }

What the above code does is it sets the width of the first 3 columns to 20%, and the width of the fourth column to 35% of the horizontal space. (The remaining 5% is there for the add/remove button.)

You can add custom CSS codes to your widget by clicking on its wand-shaped icon:

Then, switch to the Custom CSS tab, and paste the code there:

Your form will end up looking like this:

In case you want the fourth field to be even wider, and the other fields smaller, you can tweak their widths like so:

.col1 { width: 18%; }
.col2 { width: 18%; }
.col3 { width: 18%; }
.col4 { width: 41%; }
input { width: 96% !important; }
textarea { width: 96%; height: 50px; }

Please try it out, and let us know if you need any further assistance. Cheers!