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 do I color the selected cell of a Matrix ?

    Asked by cmt_admin on September 07, 2016 at 12:55 AM

    Hi, 

    I like the multiselect grid widget where the selection is highlighted in a grey color. However, since it allows multiple values to be selected, i opted to use Matrix - radio button instead. 

     

    Is there a css code to color the cell of the Matrix once the radio button is selected? 

    Thanks

    he cell

    Page URL:
    https://form.jotform.me/62500794693462

    selected how a how do i
  • Profile Image
    JotForm Support

    Answered by beril on September 07, 2016 at 03:41 AM

    I see that you've injected the CSS code below which is not working properly:

    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;

    }

    I will find a solution for changing the background color of selected field and get back to you soon.

  • Profile Image
    JotForm Support

    Answered by beril on September 07, 2016 at 06:55 AM

    Hello again;

    Unfortunately, it's not possible to select a parent element based on the status of a child element. The only way is adding the CSS code below while it is active:

    .form-matrix-values:active{

    background: red!important}

    Alternatively, you can change the code with hover effect as you see below:

    .form-matrix-values:hover{

    background: red!important}

     

     

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by cmt_admin on September 08, 2016 at 01:18 AM

    Thank you very much! The second script is exactly what I was looking for.

    Unfortunately, the first script is not working ( its good to have but I am okay if it doesn't work)

    .form-matrix-values:active{

    background: red!important}

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 08, 2016 at 02:20 AM

    The .form-matrix-values:active{background: red!important} code should work, however, it will only work when the cell is clicked using the mouse. Once the click is released, then the background will be back to normal.

    The effect is not noticeable due to the hover effect that was added using the second code, but if we temporarily remove the second code, you will notice the effect of the first code. Please see the demo below where I have temporarily removed the second code:

    If you simply want the hover effect on your matrix, then you can keep the second code on your form and remove the first one.

    Feel free to contact us again if you need further assistance.
    Regards.

  • Profile Image

    Answered by cmt_admin on September 09, 2016 at 02:15 AM

    Thanks for the clarification! Excellent codes. I preferred the second hover version and will fix according to your advice.

    Btw, is there a way to maintain the red color in the cell after the click?

    Thanks

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 09, 2016 at 03:24 AM

    You are most welcome. Unfortunately, there is currently no CSS code that we can use to maintain the red color in the cell after it has been clicked. This is simply not possible to achieve with the matrix table. An alternate solution would be to use the MultiSelect Grid Widget instead, although I understand that this is not suitable for your requirement.

    A possible workaround you can do to achieve this would be to modify the html code of your form and add custom jQuery code to keep the color of the selected cell after being clicked. This would require you to download the full source code of your form and host the code on your own server. Here's a guide on How to get the Full Source Code of your Form

    You can also check out this thread on the code that you can use: http://stackoverflow.com/questions/17703710/changing-the-color-of-a-clicked-table-row-using-jquery. If you are unfamiliar with jQuery, you may need to hire a programmer to customize the code on your form and achieve your requirement.

    Please let us know if you need further assistance.
    Regards.