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

    3 matrices on 1 form with different sizes

    Asked by trowland on December 11, 2015 at 01:12 PM

    Hello,

    I have a form with 3 matrices and I need to change the sizes of the columns of the 3rd matrix to 50, 245, 245.  Could someone please assist me with this?

     

    Thank you

    Page URL:
    https://form.jotform.me/53437126705454

    matrix styling matrix
  • Profile Image
    JotForm Support

    Answered by Mike on December 11, 2015 at 03:57 PM

    Please provide us with a correct form link, so we will be able to look into this.

  • Profile Image

    Answered by trowland on December 11, 2015 at 04:02 PM

    Sorry about that.  https://form.jotform.com/53366205628154?

  • Profile Image

    Answered by trowland on December 11, 2015 at 04:06 PM

    I think I figured out the 3 different matricies with different sizes, however, I managed to do something wrong so that the columns aren't the right width when viewed in a browser.  Could you help me with fixing this please.

    Thank you.

  • Profile Image

    Answered by Sammy on December 12, 2015 at 03:08 AM

    I presume you are referring to the third matrix in your form.

    Kindly add the following CSS to you form via the designer

    .form-matrix-table
    {
        width:100%;
    }

     

     

     

  • Profile Image

    Answered by trowland on December 15, 2015 at 01:35 PM

    It's actually all 3 of them.  They all show correctly in the builder, but when the page is viewed, the columns for all 3 are the same size.

    For example, The first matrix for "Events" shows in the builder with the different column widths(but somehow I made extend beyond the main form background).

    But when viewed it looks like.

  • Profile Image

    Answered by trowland on December 15, 2015 at 01:46 PM

    I was actually able to figure this out.  Thank you very much.

  • Profile Image
    JotForm Support

    Answered by Mike on December 15, 2015 at 02:06 PM

    Thank you for your update. Please feel free to contact us anytime if you need any further assistance.

  • Profile Image

    Answered by trowland on December 15, 2015 at 02:27 PM

    Well I take that back.  It looks like somehow I have managed to have the columns in different matrices linked together.  Could you possibly help me get the column widths below and possibly let me know how you achieved it so that I might be able to fix it in the future if needed without having to bug someone on here?

    Events Matrix

    1st column - 50

    2nd column - 50

    3rd column - 100

    4th column - 150

    5th column - 100

     

    Contact list matrix

    1st column - 150

    2nd column - 100

    3rd column - 150

    4th column - 10

     

    Equipment/Locations

    1st column - 50

    2nd column - 200

    3rd column - 200

     

     

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Welvin on December 15, 2015 at 03:07 PM

    Targeting the Class selector, you can do it this way:

    #id_43 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width: 50px !important;

    }

    #id_43 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values .form-textbox {

    width: 50px !important;

    }

    #id_43 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values + .form-matrix-values .form-textbox {

    width: 100px !important;

    }

    #id_43 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values+ .form-matrix-values+ .form-matrix-values .form-textbox {

    width: 150px !important;

    }

    #id_43 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values+ .form-matrix-values+ .form-matrix-values+ .form-matrix-values .form-textbox {

    width: 100px !important;

    }

    You will have to get the ID of the matrix (http://www.jotform.com/help/146-How-to-find-Field-IDs-Names).

    Follow by the class .form-matrix-row-headers.

    Followed by the class  .form-matrix-values. You will notice this one in red, this defines the column number. Two of this means you are targeting column 2 in the matrix.

    Followed by class .form-textbox.

    Please don't forget the space in between and the + sign separating each class.

     

    Let us know if you have any additional questions about this method.

  • Profile Image
    JotForm Support

    Answered by Welvin on December 15, 2015 at 03:11 PM

    For the second and third columns:

    #id_94 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width: 150px !important;

    }

    #id_94 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values .form-textbox {

    width: 100px !important;

    }

    #id_94 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values + .form-matrix-values .form-textbox {

    width: 150px !important;

    }

    #id_94 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values+ .form-matrix-values+ .form-matrix-values .form-textbox {

    width: 10px !important;

    }

     

     

    #id_140 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width: 50px !important;

    }

    #id_140 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values .form-textbox {

    width: 200px !important;

    }

    #id_140 .form-matrix-row-headers + .form-matrix-values+ .form-matrix-values + .form-matrix-values .form-textbox {

    width: 200px !important;

    }

  • Profile Image

    Answered by trowland on December 15, 2015 at 03:43 PM

    Thank you very much for the detailed response.  That works perfectly and I can see how I need to change things when using these on forms going forward.  Thank you again for the amazing support you guys offer.

  • Profile Image
    JotForm Support

    Answered by Welvin on December 15, 2015 at 03:56 PM

    You're welcome :) Please contact us again if we can help in any way.