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 format column with and background of a matrix?

    Asked by UnleashedIntheCity on August 18, 2016 at 02:44 PM

    Hi!

    I'd like the columns in my matrix to all be the same width but am having trouble making this happen. I've tried the following code and adjusting the column width but it didn't make a difference.

    form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

    /*-first column width-*/

    .form-matrix-values .form-textbox {

    width: 100px;

    }

    /*-2nd column width-*/

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 200px;

    }

    I'm also wondering if there's a way to remove the grey background of the matrix?

    Here is a screenshot of my matrix:

    Thanks!

    Page URL:
    https://form.jotform.com/UnleashedIntheCity/new-client-form

    Screenshot
    format and how a
  • Profile Image
    JotForm Support

    Answered by BDAVID on August 18, 2016 at 05:15 PM

    Please inject the following CSS code to adjust the width: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #id_91 table.form-matrix-table input{

    width: 60px !important;

    }

    #id_70 table.form-matrix-table input{

    width: 60px !important;

    }

    Result:

     

    On regards of the color, what background color do you want to set?

    1) In order to style the column headers, use the following code:

    .form-matrix-column-headers {

        border: 1px solid {Anycolor};

        background: {Anycolor};

    }

    Example:

    .form-matrix-column-headers {

        border: 1px solid yellow;

        background: yellow;

    }

    2) This would be the code for the row headers:

    form-matrix-row-headers {

        border: 1px solid #ccc;

        background: orange;

    }

    3) This would be the CSS code for matrix values:

    form-matrix-values {

        border: 1px solid #ddd;

        background: #00a0f0;

    }

     

    Let us know if you need more help, we will be glad to assist you.