Changing the size, background and border colors of the matrix field

  • Profile Image
    MRRose
    Asked on December 29, 2015 at 02:48 PM

    You will note the matrix survey tool...I would like to make the cells on the left (vertical) equal in height and width, I would like to put a border (black line around the cells), change the background of the label cells...finally, in the matrix I would ideally like to have the cell width for the 5 categories equal in size even though the content in each is different. Thanks for any help

  • Profile Image
    Welvin
    Answered on December 29, 2015 at 04:13 PM

    Changing the Row Headers will make the whole matrix overlap to the right of the form so I think you can keep it that way.

    You will have to inject the following custom CSS codes to your form to change the colors/widths:

    For the Row Header background and border:

    .form-matrix-row-headers {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

        color: #F5F5F5 !important;

    }

     

    For the Column Header background and border:

    .form-matrix-column-headers {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

        min-width: 70px !important;

        color: #F5F5F5 !important;

    }

     

    For the radio button background and border:

    .form-matrix-values {

        border: 1px solid #f5f5f5 !important;

        background: #589F76 !important;

    }

     

    Here's how to inject the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes