Infinite List Column Width

  • Profile Image
    katemellifont
    Asked on October 21, 2016 at 07: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

  • Profile Image
    Boris
    Answered on October 21, 2016 at 07: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.

  • Profile Image
    katemellifont
    Answered on October 21, 2016 at 07: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

  • Profile Image
    Boris
    Answered on October 21, 2016 at 08: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!