Change the text box size on a matrix field

  • Profile Image
    jaycw7
    Asked 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
    pinoytech
    Answered 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
    jaycw7
    Answered 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
    pinoytech
    Answered 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
    jaycw7
    Answered 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
    pinoytech
    Answered on September 13, 2012 at 02:27 PM

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

  • Profile Image
    jaycw7
    Answered 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
    pinoytech
    Answered on September 13, 2012 at 02:49 PM
  • Profile Image
    jaycw7
    Answered 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
    NeilVicente
    Answered 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
    jaycw7
    Answered 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
    reciproc8
    Answered 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
    idarktech
    Answered 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