hiding title in Matrix

  • Profile Image
    The_Mighty_Optiq
    Asked on March 29, 2012 at 10:36 AM

    Is there a way I can hide the titles in the Matrix?  I added a screen shot with them circled in red just so you know what I'm talking about.  You guys already helped me before with a code for hiding the title on the left column. So far the code for that is.....

     

    .form-matrix-values {padding-left: 8px;padding-right: 8px;}

    /* 1st Column */
    .form-matrix-row-headers +.form-matrix-values .form-dropdown {width: 100px;}

    /* 2nd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-dropdown {width: 100px;}

    /* 3rd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-dropdown{width: 100px;}

    /* 4th Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-dropdown {width: 100px;}

    .form-matrix-row-headers {visibility: hidden;}
    .form-matrix-table {border-collapse: inherit;}
    .form-matrix-table {margin-left: -10px;}

     

     

    I looked it over and decided to try adding the code

    .form-matrix-column-headers {visibility: hidden;}

    but that took away the titles of the field.  Is this possible? I don't want to confuse people by having more content for them the wonder about. thanks in advance!!! :)

  • Profile Image
    abajan
    Answered on March 29, 2012 at 01:08 PM

    Let us know if the following rules achieve the formatting you want:

    tbody tr {display: none;}
    tbody tr + tr {display: block;}

  • Profile Image
    The_Mighty_Optiq
    Answered on March 29, 2012 at 03:51 PM

    I just tried them.... and they didn't do anything.... unfortunately..

  • Profile Image
    NeilVicente
    Answered on March 29, 2012 at 05:34 PM

    I think you're referring to the labels of the matrix field. In that case, here's what you have to do:

    Let us use this form as an example: http://www.jotform.us/form/20656947736163

    1.  Edit your form then click the Preview button. Click Open in a new tab.

    2.  After your form loads in a new browser tab, right click then click "View Page Source". (in IE it is "View Source")

    3.  In the form's source, find all instances of "form-matrix-table", then copy the value of id of the label that precedes each instance.  For example, in your form http://www.jotform.us/form/20656947736163, there are two instances of this:

    The label ID's I got from this form are label_180 and label_182.

    4.  Copy those label ID's, then use them in the code below, following the same format (prepended with a # and separated by a comma)

    #label_180, #label_182 {
    display:none;
    }

    5.  Inject the codes to your form

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image
    The_Mighty_Optiq
    Answered on March 29, 2012 at 06:41 PM

    ok I'm lost on this one...

  • Profile Image
    NeilVicente
    Answered on March 29, 2012 at 06:43 PM

    Which particular step are you having issues folllowing?

  • Profile Image
    The_Mighty_Optiq
    Answered on March 29, 2012 at 07:10 PM

    all of it except for how to inject the code into my form.  Where in the code I posted do I post the new stuff?.... And which do I inject?.. the one at the end or the pic you posted?

  • Profile Image
    NeilVicente
    Answered on March 29, 2012 at 07:50 PM

    You can paste the new stuff in a new line, in addition to your old codes. I have rephrased the instructions on my initial response. Hope you find it easier to follow this time.