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

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

    Asked by nmoore1127 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.

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

    Screenshot
    hide row remove row hide matrix row remove matrix row
  • Profile Image
    JotForm Support

    Answered by Mike 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

    Answered by nmoore1127 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

    Answered by nmoore1127 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
    JotForm Support

    Answered by abajan 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

    Answered by nmoore1127 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

    Answered by Ben 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

    Answered by nmoore1127 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
    JotForm Support

    Answered by abajan 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

    Answered by nmoore1127 on September 23, 2015 at 06:42 PM

    Hi Abajan, Thank you it worked!