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

  • Profile Image
    addyann89
    Asked 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 form and customize it

  • Profile Image
    EltonCris
    Answered 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
    addyann89
    Answered 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
    EltonCris
    Answered 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
    Welvin
    Answered 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