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 To Get Alternating Colors In Matrix Rows

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

    Page URL:
    http://form.jotform.me/form/50353246648457?

    rows
  • Profile Image

    Answered by Sean 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

    Answered by martinbond 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
    JotForm Support

    Answered by Welvin on February 09, 2015 at 08:45 AM

    Hi Martin,

    Will check this and get back to you. 

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin 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

    Answered by martinbond 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
    JotForm Support

    Answered by Welvin 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
    JotForm Support

    Answered by Welvin 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

    Answered by martinbond 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

    Answered by Carina 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

    Answered by Carina on February 26, 2015 at 10:43 AM

    You can inspect the test form:

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

    Thank you