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

    Infinite List Column Width

    Asked by katemellifont 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

    Page URL:
    https://form.jotformeu.com/62876515147362

    column width infinite list infinite wider
  • Profile Image
    JotForm Support

    Answered by Boris 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

    Answered by katemellifont 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
    JotForm Support

    Answered by Boris 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!