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 Can I Change the Matrix's Text Color When It is Active?

    Asked by Canyonview on March 01, 2016 at 08:10 PM

    I'm trying to set this up so that viewers can read the text when they click but the white text becomes difficult to read when you click on a radio button (every other row).

     

     

    Page URL:
    https://form.jotform.com/Canyonview/cv-reference-form

    Screenshot
    click matrix text custom CSS
  • Profile Image
    JotForm Support

    Answered by mert on March 02, 2016 at 04:15 AM

    Hi there,

    By adding some custom CSS to your form, we can easily make the changes you want. Below, you will find the code for changing the font color when it's active.

     

    .form-line-error {

        color: black;

        text-shadow: 0 -1px white;

    }

     

    Please, see the results from the below:

     

    If you want, we can change even more things like green background color when it is active. So, please answer this thread for more customization.

     

    Thanks.

  • Profile Image

    Answered by Canyonview on March 02, 2016 at 12:48 PM

    Yes please.  I was using the designer and having trouble get it all correct.  I don't like the green background but couldn't find a color that would make the text legible.

     

    Here's what I'd like.  a light yellow color when highlighted.  The text to be indented on the rows so it's not so close to the edge on the left.  The font to be slightly larger so it's easier to read but not so big that they start wrapping (maybe make the first column wider so it can accommodate the larger font).

     

    Thanks for your help!

  • Profile Image

    Answered by Ben on March 02, 2016 at 04:25 PM

    a light yellow color when highlighted

    For that you can apply the following CSS:

    li.form-line.form-line-active {
        background-color: lightyellow;
        transition-duration: 0.3s;
        transition-property: all;
        transition-timing-function: ease;
    }

    - It will apply a light yellow color to the active matrix field (Please do note that your error code is green - so on error that will be activated).

    Now, instead of lightYellow, you might consider one of the following alternatives instead:

    1. palegoldenrod

    2. moccasin

    3. yellow

    4. lightgoldenrodyellow

    5. lemonchiffon

    6. khaki

    7. gold

    Each are a variant similar to yellow, while each has its own touch. To use it, just replace the (bold) lightyellow text with the new value.

    The text to be indented on the rows so it's not so close to the edge on the left.

    This CSS will help you with that:

    .form-matrix-table tr > th:first-child {
        padding-left: 10px;
    }

    You can adjust the number (10) to any other number that you wish. The larger the number more text goes to the right and away from the left edge. Lower the number and the text is closer to the left edge.

    The font to be slightly larger so it's easier to read but not so big that they start wrapping (maybe make the first column wider so it can accommodate the larger font).

    The following CSS will help you with that:

    .form-matrix-table th {
        font-size: 14px;
    }

    You can adjust the number (14) as per your preferences. I would recommend 14 to 16, but since the other text on your form is lower, I believe that 14px would be better than 16.

    This is the complete CSS:

    li.form-line.form-line-active {
        background-color: lightyellow;
        transition-duration: 0.3s;
        transition-property: all;
        transition-timing-function: ease;
    }
    .form-matrix-table tr > th:first-child {
        padding-left: 10px;
    }
    .form-matrix-table th {
        font-size: 14px;
    }

    It is also possible to only have the changes you have mentioned applied if the field is active and have it as it currently is until it gets activated. To do that, we need to slightly modify the CSS, so it would be like this:

    li.form-line.form-line-active {
        background-color: lightyellow;
        transition-duration: 0.3s;
        transition-property: all;
        transition-timing-function: ease;
    }
    li.form-line.form-line-active .form-matrix-table tr > th:first-child {
        padding-left: 10px;
    }
    li.form-line.form-line-active .form-matrix-table th {
        font-size: 14px;
    }

    Regardless of the code that you end up using, I would suggest adding it to your form by following these steps: Inject Custom CSS Codes

    While doing the same, it is only important to note that when you enter the custom CSS code, you should go down until you reach the end of the code that is currently present. Once you see the bottom, you should click after all the other code and then paste the code.

    Once you do you can save your form and preview the changes.

    If you have any issues applying the same, do let us know, just as well as if you have any additional questions or issues and we would be happy to assist with the same :)