How To Get Alternating Colors In Matrix Rows

Hi, 

I'm trying to have alternative row colors in all my Martix's. I've followed the linked user-guide but still cannot get the code to work - http://acmeous.blogspot.ae/2011/10/how-to-color-alternate-rows-in-table.html

Can you please take a look at this for me on the following example form - http://form.jotform.me/form/50353246648457?

Thank you in advance.  

Martin. 

Hello martinbond,

I checked the scripts on the webpage you provided and base on how it is configured you would have to modify the source code for the form for it to work. I came up with a much simpler solution that you can explore. If you add the following code to your form, it will allow you to have alternate coloring on your matrix for about 20 entries (you can increase this manually if your wish).

#r0,#r2,#r4,#r6,
#r8,#r10,#r12,#r14,
#r16,#r18,#r20{
background: #ccc;
}

Here is a test form to demonstrate:
http://form.jotformpro.com/form/50384029216956

You can follow this guide to inject the above CSS or you can follow the screenshot below.

Do lets us know if this is a possible work around for you. We will await your response.


Cheers!
Sean

Hi Sean, 

Thanks for your response, however it's just the normal Matrix / Grid I require the code for as seen in attached snip. The code you provided does not work in this instance. Can you please indicate how to clean the code up or provide a relevant code. 

Link to form - http://form.jotform.me/form/50353246648457? 

I know this is a different form from previous but I have these grids in all my forms. 

Thank you in advance, 

Regards,

Martin. 

Hi Martin,

Will check this and get back to you. 

Thanks

Inject the following custom CSS codes to your form: http://pastiebin.com/54d8bebc481ff. Just change orange to any colors you want. I have it per row just in case you would like to give each row a unique color. Just check the labels to which rows are the codes are applied.

Thanks

Hi, this code is not working for me, it's only implementing the background colors and now row by row as seen in screenshot below 

Are you working on this form: http://www.jotform.com/form/50558925438465? Please take note that each matrix field have its own ID. If you are working on the given form, the correct custom CSS codes are the following:

#cid_23 .form-matrix-table tbody > tr:nth-child(2) {

background-color : orange !important;

}

#cid_23 .form-matrix-table tbody > tr:nth-child(3) {

background-color : orange !important;

}

#cid_23 .form-matrix-table tbody > tr:nth-child(4) {

background-color : orange !important;

}

And also before injecting the codes for the matrix rows, you will have the following custom CSS codes for the entire matrix field headers and values, they have to be in transparent:

.form-matrix-column-headers, .form-matrix-row-headers {

background : transparent !important;

}

.form-matrix-values {

background : transparent !important;

}

Then you have to make sure that no other custom CSS codes or the same codes that will override these styles in the form.

Please let us know if the form is correct so we can check and help you correct it.

Thank you!

Okay, I decided to clone your form and here it is: http://www.jotformpro.com/form/50560999197976. You'll see, I've managed to change the color using the give codes for ID 23.

Thanks

Hi, can you please give the questionnaire another URL as when I clone it it copy the CSS code it just clones my existing one. alternativly can you include the complete code you input & indicate what you removed. To help me along the colour codes I would like for each alternating rows are : 

#F8F8F8 

#E8E8E8

The specific code for changing the matrix background is this:

.form-matrix-column-headers, .form-matrix-row-headers {

background : transparent !important;

}

.form-matrix-values {

background : transparent !important;

}

 /* first matrix */ 

#cid_23 .form-matrix-table tbody > tr:nth-child(2) {

background-color : #F8F8F8 !important;

}#cid_23 .form-matrix-table tbody > tr:nth-child(3) {

background-color : #E8E8E8 !important;

}#cid_23 .form-matrix-table tbody > tr:nth-child(4) {

background-color : #F8F8F8 !important;

}

 /* second matrix */ 

#cid_25 .form-matrix-table tbody > tr:nth-child(2) {

background-color : #F8F8F8 !important;

}#cid_25 .form-matrix-table tbody > tr:nth-child(3) {

background-color : #E8E8E8 !important;

}#cid_25 .form-matrix-table tbody > tr:nth-child(4) {

background-color : #F8F8F8 !important;

}

You can repeat this process for all the matrix in the form, by adding the ID (cid_00) and adding more lines tr:nth-child(...)

Let us know if we can assist you further.

You can inspect the test form:

http://form.jotformpro.com/form/50564573935968? 

Thank you