How can we format Matrix field?

  • Profile Image
    StudioBe
    Asked 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!
  • Profile Image
    Ben
    Answered 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
    StudioBe
    Answered on September 22, 2015 at 03:59 PM

    Thanks!

  • Profile Image
    Ben
    Answered 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.