3 matrices on 1 form with different sizes

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

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

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

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.

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%;
}

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.

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

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

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.

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.

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;

}

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.

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