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

    Change the text box size on a matrix field

    Asked by jaycw7 on September 13, 2012 at 01:51 PM

    Hi

    Just wondering how to change the size of the text box on the matrix.  I was shown how to make it wider but is it possible to make it longer as well? (increase the number of rows)?

    Thanks

  • Profile Image

    Answered by pinoytech on September 13, 2012 at 02:02 PM

    Hi jaycw7,

    I have made sample form for you to look at if this is what you want to achieve.

    http://www.jotform.me/form/21906460093451?

    If yes, you can use this codes and inject in to your form:

    .form-matrix-values .form-textbox {

    width: 100px;

    height: 150px;

    }

    Thank you!

  • Profile Image

    Answered by jaycw7 on September 13, 2012 at 02:07 PM

    Perfect.  I just inject that into the css editor?  Do I need to use the field ID to differentiate between matrix fields or does this only create a global change?

    Thanks

  • Profile Image

    Answered by pinoytech on September 13, 2012 at 02:15 PM

    If you want all textbox of your matrix field increase the height, no need to use field ID.

  • Profile Image

    Answered by jaycw7 on September 13, 2012 at 02:20 PM

    Ok.  I will have many different matrix fields with different input boxes so in order to differentiate I will need to use the ID I am assuming?  Can you give me an example of what it would look like?

  • Profile Image

    Answered by pinoytech on September 13, 2012 at 02:27 PM

    Would you mind if we ask your form URL or form ID?

  • Profile Image

    Answered by jaycw7 on September 13, 2012 at 02:29 PM

    I am just in the process of planning it.  Its going to a big form and instead of doing a bunch of individual text boxes I figured I'd put them all in a matrix because we are going to have a lot of duplicates and conditions and this will save the hassle and time.  

  • Profile Image

    Answered by pinoytech on September 13, 2012 at 02:49 PM
  • Profile Image

    Answered by jaycw7 on September 13, 2012 at 02:56 PM

    Thats fantastic!  I need to learn how to do that!

     

    I would probably only need to have all text boxes set to the same size within one matrix field.  I duplicated that form to look at the settings but couldn't see how to change it.  I am guessing I'd need to do more than just inject CSS but would need to get into the actual source code?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on September 13, 2012 at 04:24 PM

    @jaycw7

    To have all text boxes within one matrix table share the same size/width, you will have to add the table's ID to the CSS codes provided by pinoytech in this manner:

    #id_30 .form-matrix-values .form-textbox {
    width: 100px;
    height: 150px;
    }

    To find your matrix table's ID number:

    1.  Preview your form
    2.  Right click then View Source

    3.  Find your matrix table's label on the codes
    4.  Get the number that is common with the elements next to it

  • Profile Image

    Answered by jaycw7 on September 13, 2012 at 05:43 PM

    Thank you! I liked the example given earlier with differing text field sizes within the one matrix field.  I assume I accomplish this through the source code?

  • Profile Image

    Answered by reciproc8 on December 07, 2012 at 06:03 PM

    Hey guys can you help me adjust the text box sizes on this form:

    http://jotform.ca/form/23408480502245

     

    I need the URL box to be much bigger and the city name boxes to be 2x ish bigger.

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by idarktech on December 07, 2012 at 06:38 PM

    @reciproc8

    You can control the box sizes on your matrix field by injecting the following css codes to your form. Just change the width values so it fits exactly on your needs.

     

     

    .form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

    .form-matrix-values .form-textbox {

    width: 200px;

    }

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 300px;

    }

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 200px;

    }

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 300px;

    }

     

     

    Follow this guide: How to Inject Custom CSS Codes to your Form