3 matrices on 1 form with different sizes

  • Profile Image
    trowland
    Asked 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

  • Profile Image
    Mike
    Answered 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
    trowland
    Answered on December 11, 2015 at 04:02 PM

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

  • Profile Image
    trowland
    Answered 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
    Sammy
    Answered 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
    trowland
    Answered 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
    trowland
    Answered on December 15, 2015 at 01:46 PM

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

  • Profile Image
    Mike
    Answered 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
    trowland
    Answered 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
    Welvin
    Answered 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
    Welvin
    Answered 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
    trowland
    Answered 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
    Welvin
    Answered on December 15, 2015 at 03:56 PM

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