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 do I change the size of the text box inside the survey/matrix?

    Asked by addyann89 on August 26, 2015 at 05:44 PM

    How do I change the size of the text box inside the survey/matrix?



    This is a re-post of a comment on How to create a survey and customize it

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 26, 2015 at 10:07 PM

    You can change its size by injecting the following CSS codes to your form.

    .form-matrix-values .form-textbox {

        width: 150px !important;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    Feel free to change the 150px width if you want to adjust the text box size.

    Hope this helps!

  • Profile Image

    Answered by addyann89 on August 27, 2015 at 09:44 AM

    Great! Thank you! 

     

    What if I  wanted to adjust the size of a specific column?

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 27, 2015 at 11:37 AM

    That's still possible but it would require a few more CSS codes.

    You can use and adjust the following CSS codes.

    .form-matrix-values {padding-left: 3px;padding-right: 3px;}

    /* 1st Column */.form-matrix-row-headers +.form-matrix-values .form-textbox {width: 130px;}

    /* 2nd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {width: 160px;}

    /* 3rd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{width: 130px;}

    /* 4th Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 130px;}

    /* 5th Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values  +.form-matrix-values .form-textbox {width: 130px;}

     

    Those mark as bold are things to note, labels (so you can identify which column is it applied for) and the width value. Feel free to adjust the width values according to your preference. On this sample code, column 2 has 160px width while the rest has 130px.

    If you need further assistance, let us know.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Welvin on August 27, 2015 at 03:52 PM

    What if I just wanted it to make the above adjustments for a specific Matrix in my form and not all of them?

    -You need to add the field ID at the biggening of each line followed by a space.

    For example:

    #id_4 .form-matrix-row-headers +.form-matrix-values .form-textbox {width: 130px;}

    To find the field ID, simply access the properties:

    You'll see, for example, #input_4. Just disregard the other numbers. Simply change #input_4 to #id_4.

    Let us know if you need further assistance about this matter.

    Thanks