What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No signup 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.

3 matrices on 1 form with different sizes
Asked by trowland on December 11, 2015 at 01:12 PMHello,
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
https://form.jotform.me/53437126705454

JotForm Support
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
.formmatrixtable
{
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.

JotForm Support
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.

JotForm Support
Targeting the Class selector, you can do it this way:
#id_43 .formmatrixrowheaders + .formmatrixvalues .formtextbox {
width: 50px !important;
}
#id_43 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues .formtextbox {
width: 50px !important;
}
#id_43 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues + .formmatrixvalues .formtextbox {
width: 100px !important;
}
#id_43 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues+ .formmatrixvalues+ .formmatrixvalues .formtextbox {
width: 150px !important;
}
#id_43 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues+ .formmatrixvalues+ .formmatrixvalues+ .formmatrixvalues .formtextbox {
width: 100px !important;
}
You will have to get the ID of the matrix (http://www.jotform.com/help/146HowtofindFieldIDsNames).
Follow by the class .formmatrixrowheaders.
Followed by the class .formmatrixvalues. 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 .formtextbox.
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.

JotForm Support
For the second and third columns:
#id_94 .formmatrixrowheaders + .formmatrixvalues .formtextbox {
width: 150px !important;
}
#id_94 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues .formtextbox {
width: 100px !important;
}
#id_94 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues + .formmatrixvalues .formtextbox {
width: 150px !important;
}
#id_94 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues+ .formmatrixvalues+ .formmatrixvalues .formtextbox {
width: 10px !important;
}
#id_140 .formmatrixrowheaders + .formmatrixvalues .formtextbox {
width: 50px !important;
}
#id_140 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues .formtextbox {
width: 200px !important;
}
#id_140 .formmatrixrowheaders + .formmatrixvalues+ .formmatrixvalues + .formmatrixvalues .formtextbox {
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.

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