How To Get Alternating Colors In Matrix Rows

  • Profile Image
    martinbond
    Asked on February 08, 2015 at 12:45 AM

    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. 

  • Profile Image
    Sean
    Answered on February 08, 2015 at 03:05 PM

    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

  • Profile Image
    martinbond
    Answered on February 09, 2015 at 12:12 AM

    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. 

     

  • Profile Image
    Welvin
    Answered on February 09, 2015 at 08:45 AM

    Hi Martin,

    Will check this and get back to you. 

    Thanks

  • Profile Image
    Welvin
    Answered on February 09, 2015 at 09:07 AM

    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

  • Profile Image
    martinbond
    Answered on February 25, 2015 at 11:32 PM

    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 

  • Profile Image
    Welvin
    Answered on February 26, 2015 at 12:46 AM

    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!

  • Profile Image
    Welvin
    Answered on February 26, 2015 at 12:55 AM

    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

  • Profile Image
    martinbond
    Answered on February 26, 2015 at 03:31 AM

    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

  • Profile Image
    Carina
    Answered on February 26, 2015 at 10:42 AM

    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.

  • Profile Image
    Carina
    Answered on February 26, 2015 at 10:43 AM

    You can inspect the test form:

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

    Thank you