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

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.

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.

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.

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

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

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?

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?

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

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

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

Hi Abajan, Thank you it worked!