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

    How can we format Matrix field?

    Asked by StudioBe on September 22, 2015 at 03:18 PM
    Can someone please explain how you would use the above code for a 6 columns? I would assume you could just copy the code from one of the current columns, add it to the bottom, and change the numbers to "5th" and "6th". But it doesn't work. It only changes column 1-4. Thanks!
    Matrix formatting format matrix
  • Profile Image

    Answered by Ben on September 22, 2015 at 03:23 PM

    Looking at the code of my colleague:

    /* 1st column */
    .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 2nd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 3rd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 4th Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    Now using the same way to change the columns means that we can change it by simply adding another + (plus) followed by another class, like so:

    /* 5th column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {
      width: 100px;
      border-style: solid;
      border-width: 1px;
      border-color: black;
    }
    /* 6th column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {
      width: 100px;
      border-style: solid;
      border-width: 1px;
      border-color: black;
    }

    Following the same logic you simply add  +.form-matrix-values each time you need to add style to one more column.

    Do let us know how it goes and if you happen to have any further questions and we would be happy to assist with the same.

  • Profile Image

    Answered by StudioBe on September 22, 2015 at 03:59 PM

    Thanks!

  • Profile Image

    Answered by Ben on September 22, 2015 at 04:30 PM

    You are welcome.

    Please do let us know if you have any further questions and we would be happy to answer the same.