-
hospitalitymanagementAsked 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.
-
jonathanReplied 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.
-
hospitalitymanagementReplied 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.
-
jonathanReplied 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;
}
Let us know how it goes.
-
hospitalitymanagementReplied 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.
-
jonathanReplied 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?
Please try this CSS
.form-matrix-column-headers {
color: #ff3200 !important;
}
Let us know how it goes.
-
hospitalitymanagementReplied 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!
-
jonathanReplied 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.