Custom styles for a Matrix field.

  • Profile Image
    Gayav
    Asked 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
    Boris
    Answered 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
    Gayav
    Answered 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
    Chriistian
    Answered 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.