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

  • nmoore1127
    Asked on September 22, 2015 at 2: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.

    Jotform Thread 668104 Screenshot
  • Mike
    Replied on September 22, 2015 at 3:53 PM

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

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

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

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

    Thank you.

  • nmoore1127
    Replied on September 22, 2015 at 5: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.

  • nmoore1127
    Replied on September 22, 2015 at 5:19 PM

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

     

  • abajan
    Replied 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

  • nmoore1127
    Replied 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?

  • Ben
    Replied on September 23, 2015 at 2: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:

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

    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:

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

    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?

  • nmoore1127
    Replied on September 23, 2015 at 4:28 PM

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

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

  • abajan
    Replied on September 23, 2015 at 5: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

  • nmoore1127
    Replied on September 23, 2015 at 6:42 PM

    Hi Abajan, Thank you it worked!