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

    Custom styles for a Matrix field.

    Asked by Gayav on September 01, 2016 at 09:24 AM

    #3. Matrix widget

    Please help me to display or change  properties of matrix widget as other field box size and font style in order to make them even in webform

  • Profile Image
    JotForm Support

    Answered by Boris on September 01, 2016 at 09:44 AM

    I see that your Matrix field named "MEDICATION LIST:" is already set to have its inputs as Text Box fields, and it appears like this:

    I'm not sure what you are asking about with this field. Are you asking for it to have white labels (headers), without any background? If so, please try adding the following custom CSS into your form:

    .form-matrix-column-headers, .form-matrix-row-headers, .form-matrix-values {
        background: none;
        color: #fff;
    }
    .form-matrix-table tr:nth-child(2n) {
        background: none !important;
    }

    It would cause your form to display like this:

    If that is not what you were asking about, please let us know in more detail about what it is you are looking to achieve, and we'll be happy to help. Thanks.

  • Profile Image

    Answered by Gayav on September 01, 2016 at 09:45 PM
    Hi,
    Thank you.Please help me to make the matrix table rows and column text
    bold and align the matrix table to center position.
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 02, 2016 at 12:19 AM

    You can inject the custom CSS code below to center align the Medication List matrix table and make the text bold.

    #cid_229 table {

        margin: auto;

    }

    #cid_229 .form-matrix-column-headers {

        font-weight: bold !important;

    }

    #id_229 label {

        margin: auto;

    }

    If you need further assistance, please let us know.
    Regards.