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

  • Profile Image
    ModernAB
    Asked 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

  • Profile Image
    khrisell
    Answered 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. :)