Multiple Matrix formatted differently with CSS?

  • Profile Image
    SJAtraining
    Asked 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!

  • Profile Image
    EduardoMendez
    Answered 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
    SJAtraining
    Answered 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
    EduardoMendez
    Answered 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
    SJAtraining
    Answered 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 +

    }