How can we format Matrix field?

  • StudioBe
    Asked on September 22, 2015 at 3: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!
  • Ben
    Replied on September 22, 2015 at 3: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.

  • StudioBe
    Replied on September 22, 2015 at 3:59 PM

    Thanks!

  • Ben
    Replied on September 22, 2015 at 4: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.