-
katemellifontAsked on October 21, 2016 at 7:20 AM
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
-
BorisReplied on October 21, 2016 at 7:45 AM
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.
-
katemellifontReplied on October 21, 2016 at 7:53 AM
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 -
BorisReplied on October 21, 2016 at 8:12 AM
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!