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

    How can I edit the size of columns in my form?

    Asked by ModernAB on August 29, 2013 at 07:00 PM

    I am using a template, but need the width of some of the columns to be smaller than others to fit correctly. How and can I do this? Help me Please.

    Thanks.

    -giL

    Page URL:
    http://www.jotform.com//?formID=32401132056135

    Screenshot
    size template thanks
  • Profile Image

    Answered by khrisell on August 29, 2013 at 09:12 PM

    Hello,

    To adjust the column in general, kindly inject this code and adjust according to your needs.

    .form-matrix-values { width:300px; } 

    However, If you wanted to have specific width per column, use this code instead.

    (You can change the values for the width, border style and color according to your needs.)

    /* 1st column */
    .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 2nd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 3rd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 4th Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    Follow this guide on how to inject this codes

    1. Click Setup & Embed

    2. Preference

    A new window will pop-up.

    3. Then click Form Styles

    4. And paste the code under Inject Code CSS box.

    ]

    And then close that window and you're done.

     

    Kindly let us know if you need further assistance.

    Thank you for using JotForm. :)