Matrix CSS color & border code

  • Profile Image
    martinbond
    Asked 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. 

  • Profile Image
    Sean
    Answered 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
    Sean
    Answered 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!