How can I create alternating colors on matrix rows?

  • hospitalitymanagement
    Asked on February 23, 2016 at 12:12 PM

    I have a matrix on one of my forms that I would like to have alternating rows be different colors. I found some code that changes the columns using the Nth property, but I really need the rows to change, not the columns.

  • jonathan
    Replied on February 23, 2016 at 2:28 PM

    I assume this was the form http://www.jotform.com/60356664102147 

    Let me check how this can be achieve using custo injected CSS codes.

    We will get back to you once we have update.

    Thanks.

  • hospitalitymanagement
    Replied on February 23, 2016 at 2:31 PM

    Yes, this is the correct form. I have a matrix about three pages in that I want alternating rows to be slightly different so customers know which line they're looking at.

  • jonathan
    Replied on February 23, 2016 at 3:02 PM

    You can use CSS code like this. Just change the color code according to your preference. 

     

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

    background-color: #FE8900 !important;

    }

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

    background-color: #FDC333 !important;

    }

    How can I create alternating colors on matrix rows? Image 1 Screenshot 20

     

    Let us know how it goes.

     

     

  • hospitalitymanagement
    Replied on February 23, 2016 at 4:31 PM

    Awesome! That's exactly what I needed! Only, next question is, how do I get the label column to reflect the same color striping as the table? I can only figure out how to change the whole column, not every-other. I tried modifying the code you gave me using the proper container, but it didn't seem to work.

  • jonathan
    Replied on February 23, 2016 at 5:40 PM

    ...how do I get the label column to reflect the same color striping as the table?

    You meant like this?

    How can I create alternating colors on matrix rows? Image 1 Screenshot 20

     

    Please try this CSS

    .form-matrix-column-headers {

        color: #ff3200 !important;

    }

     

    Let us know how it goes.

     

  • hospitalitymanagement
    Replied on February 24, 2016 at 11:02 PM

    I'm sorry, I should have been clearer: I meant the column on the far left. I'd like every other row to have alternating background colors to identically match the striping. I definitely appreciate all your help. You've been awesome!

  • jonathan
    Replied on February 25, 2016 at 3:22 AM

    Allow me more time to check on how to achieve this. I'll get back to you shortly.