How to change the color of matrix rows?

  • Profile Image
    jeromejj4
    Asked on January 05, 2017 at 11:31 AM

    Hi,

    I have created a form in which I have survey sorts of questions.  There are many rows all right next to one another and in order to make it easier for the user to see what row they are on while answering the questions, I want to make each row an alternating color.  I'm hoping to use white and maybe a lighter grey than the current default.  I've looked at a couple answers for other forms but I don't do any CSS so I'm not sure how to go about getting it into my form.  It currently has two matrices but there will be more if my co-workers approve of the format.  As such any step by step information you could provide for when I add a new matrix would be amazing.  

     

    Thanks so much,

     

    Jenee

  • Profile Image
    Nik_C
    Answered on January 05, 2017 at 12:52 PM

    Please try to copy and paste the below CSS code to your Custom CSS field:

    .form-matrix-table tr:nth-child(odd) td {

    background-color: white !important;

    }

    .form-matrix-table tr:nth-child(even) td {

    background-color:gray !important;

    }

    If you have any further questions please let us know.

    Thank you!

     

  • Profile Image
    jeromejj4
    Answered on January 09, 2017 at 12:39 PM

    Thank you!  This worked well for the answer section of the matrix.  Could the grey and white extend to the question rows too rather than just the answer portion of the rows?  Thank you again!

  • Profile Image
    david
    Answered on January 09, 2017 at 03:38 PM

    It seems the table headers are all treated as on element.  Styling all of the headers a single color is possible, however, it appears as though the row headers would all need to be the same color. 

    For the row headers:

    .form-matrix-row-headers {

        background: white !important;

    }

     

    For the Column Header background:

    .form-matrix-column-headers {

        background: white !important;

    }

  • Profile Image
    jeromejj4
    Answered on January 09, 2017 at 05:07 PM

    Thank you!  The white at least helps with the overall readability even if it doesn't allow for an every other format.