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 I create alternating colors on matrix rows?

    Asked by hospitalitymanagement 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.

    matrix color
  • Profile Image
    JotForm Support

    Answered by jonathan on February 23, 2016 at 02: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.

  • Profile Image

    Answered by hospitalitymanagement on February 23, 2016 at 02: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.

  • Profile Image
    JotForm Support

    Answered by jonathan on February 23, 2016 at 03: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;

    }

     

    Let us know how it goes.

     

     

  • Profile Image

    Answered by hospitalitymanagement on February 23, 2016 at 04: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.

  • Profile Image
    JotForm Support

    Answered by jonathan on February 23, 2016 at 05:40 PM

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

    You meant like this?

     

    Please try this CSS

    .form-matrix-column-headers {

        color: #ff3200 !important;

    }

     

    Let us know how it goes.

     

  • Profile Image

    Answered by hospitalitymanagement 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!

  • Profile Image
    JotForm Support

    Answered by jonathan on February 25, 2016 at 03:22 AM

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