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

    Multiple Matrix formatted differently with CSS?

    Asked by SJAtraining on August 14, 2012 at 01:57 PM

    I'm trying to use create a form that has multiple Matrix forms used for gathering information. Each form needs to have custom width/length for different fields.

    I'm using the CSS code and it's working, but is affecting all the forms. Is there a way to code it so that each form is altered individually?

     

    thanks!

    Page URL:
    http://form.jotformpro.com/form/22263818145958?

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on August 14, 2012 at 03:27 PM

    Hi SJAtraining,

    A quick question, would you like the CSS to be applied to a specif Matrix and not all of them?  

  • Profile Image

    Answered by SJAtraining on August 14, 2012 at 03:49 PM

    Yes, that's it!

    If possible, I'd like to modify the sizing of each Matrix independently of each other.

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on August 14, 2012 at 04:13 PM

     

    Hi SJAtraining,

    You can do this.  I was looking at your form and each of your charts has a unique id.

    You can code preferences for each

    #cid_3 ("cid_3" is the actual id name for the second matrix on your form)

    {

    Your CSS for the first table

    }

    #cid_4 ("cid_4"is the actual id name for the third matrix on your form)

    {

    Your CSS for the second table

    }

    #cid_5 ("cid_5" is the actual id name for the first matrix on your form)

    {

    Your CSS for the third table

    }

    Hope that Helps!

    Ed Mendez

  • Profile Image

    Answered by SJAtraining on August 14, 2012 at 04:14 PM

    you're awesome - thankyou!

    Edit - still think you're awesome, but it's not working - any suggestions?

    One more question - where do you find the id for each element, so I can identify them in the future?

    thanks!

    Here's my code now:

    .form-matrix-values {

     

    padding-left: 2px;

    padding-right: 2px;

    }

    #cid_3

    {

    .form-matrix-row-headers +

    .form-matrix-values

    .form-textbox {width: 120px;}

    /*surname*/.form-matrix-row-headers +

    }