Hide a matrix row (not just the input field) using css {display: none}

  • Profile Image
    nmoore1127
    Asked on September 22, 2015 at 02:40 PM

    Would like to hide 2 rows in my matrix that I am only using for conditional calculations. I was able to hide the input fields but I would rather hide the entire row without losing the calculations.

    Right now I have dashes running across the rows I would like to hide. See screenshot attached.

  • Profile Image
    Mike
    Answered on September 22, 2015 at 03:53 PM

    In case you need to remove a row you can do it within form builder.

    If the idea is to have empty rows, we will most likely need to use {visibility: hidden} CSS rules.

    Thank you.

  • Profile Image
    nmoore1127
    Answered on September 22, 2015 at 05:18 PM

    The idea is to keep the rows because they contain calculations (conditions) but to inject some css to hide the rows.

    Please tell me how to write this code.

  • Profile Image
    nmoore1127
    Answered on September 22, 2015 at 05:19 PM

    I was able to hide the input fields using css but not the entire row.

     

  • Profile Image
    abajan
    Answered on September 22, 2015 at 10:29 PM

    Adding the following rule to the form's CSS should do the trick:

    #cid_61 table tbody
    tr:nth-child(4),
    tr:nth-child(7) {
     display : none;
    }

    Do inform us if you need further assistance with anything.


    Thanks

  • Profile Image
    nmoore1127
    Answered on September 23, 2015 at 11:50 AM

    Hi, Thanks! I injected your code. It worked for the (child)7 row but not the 4? I tried it over and over but couldn't get both rows to hide. Any ideas?

  • Profile Image
    Ben
    Answered on September 23, 2015 at 02:07 PM

    Looking at the CSS above it should work, but I do not see it applied to your form, however this is a bit different CSS that will hide the rows where ---- is at:

    #cid_61 .form-matrix-table tr:nth-child(4), #cid_61 .form-matrix-table tr:nth-child(7) {
        display: none;
    }

    This will make it look like this:

    Now, if you want to break it as my colleague Mike did above, so that you have a blank space instead of the row:

    #cid_61 .form-matrix-table tr:nth-child(4), #cid_61 .form-matrix-table tr:nth-child(7) {
        visibility: hidden;
    }
    #cid_61 .form-matrix-table tr:nth-child(4) td, #cid_61 .form-matrix-table tr:nth-child(4) th, #cid_61 .form-matrix-table tr:nth-child(7) td, #cid_61 .form-matrix-table tr:nth-child(7) th {
        border: none;
    }

    This will make it look like this:

    I would only like to suggest to always add new CSS codes at the bottom of all of the other CSS in your form by following these steps: Inject Custom CSS Codes

    Do let us know how it goes and if you are trying to modify some other matrix, or have any issues doing the same please do let us know. Also, if there are issues, can we add the CSS to your form for you?

  • Profile Image
    nmoore1127
    Answered on September 23, 2015 at 04:28 PM

    I injected the both snippets and neither worked. Here's a link to my form:

    https://secure.jotformpro.com/form/52614915606961

  • Profile Image
    abajan
    Answered on September 23, 2015 at 05:49 PM

    Hi again,

    There's an extra closing brace in your injected CSS which appears to be causing the issue. Please delete all of the CSS and replace it with this code. Alternatively, if you don't wish spaces to be shown in place of the hidden rows, use this code.

    Do let us know if the result of using either code is to your satisfaction.


    Cheers

  • Profile Image
    nmoore1127
    Answered on September 23, 2015 at 06:42 PM

    Hi Abajan, Thank you it worked!