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

    Matrix CSS color & border code

    Asked by martinbond on March 10, 2015 at 03:40 AM

    Hi, 

    Who CSS code do I need to implement to make my Matrix styling the same as my Configurable list, both formats seen below. 

     

    I.e Alternating row colors, Label header in different color and all areas to have border. Notice Yes / No section in Matrix does not have border. I tried to implement this in developer tool but it would not respond to my changes. 

     

     

     

     

    Regards,

    Martin. 

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

    JotForm uploads label jpg
  • Profile Image

    Answered by Sean on March 10, 2015 at 10:48 AM

    I am currently looking into this for you and I will provide you with an update soon. Sorry about the delay.


    Cheers!

  • Profile Image

    Answered by Sean on March 11, 2015 at 01:52 PM

    Hello martinbond

    Sorry about my delayed response. I did some testing with a cloned version of your form and I believe I have addressed all your concerns outlined in your initial post.

    You can view my adjusted cloned form here:
    http://form.jotformpro.com/form/50695427518968? 

    To add alternating colors to your form you should inject this code:

    table.form-matrix-table tr:nth-child(odd) th, table.form-matrix-table tr:nth-child(odd) td {
    background-color: #ccc !important;
    }

    table.form-matrix-table tr:nth-child(even) th, table.form-matrix-table tr:nth-child(even) td{
    background-color: #fff !important;
    }

    table.form-matrix-table tr:first-child > th {
    background: none repeat scroll 0 0 transparent !important;
    }

    To change the background of your Yes/No cells add this code:

    table.form-matrix-table tbody tr:first-child th:nth-child(2){
    background-color: #c8c8c8 !important;
    border: 1px solid #000 !important;
    }

    table.form-matrix-table tbody tr:first-child th:nth-child(3){
    background-color: #c8c8c8 !important;
    border: 1px solid #000 !important;
    }

    To add the border to the Yes/No columns, add this code:

    table.form-matrix-table td:nth-child(2){
    border: 1px solid #000 !important;
    }

    table.form-matrix-table td:nth-child(3){
    border: 1px solid #000 !important;
    }

    Do let us know if further assistance is needed.

    Cheers!