Form with multiple matrices each requiring different column widths

  • munsen70
    Asked on November 2, 2015 at 11:28 AM

    Hello,

    I saw this question when searching for the answers, but the answer did not include a way to determine the actual name of each matrix.  I am building a form and need to have 2 different matrices and each needs to have a different number of columns and each column needs to have a different text box width.  I found the solution for changing the width, etc for a matrix, but it appears to be a form wide option.  Would anyone be able to assist me with this?

     

    Thank you.

  • munsen70
    Replied on November 2, 2015 at 2:42 PM

    Nevermind.  I didn't even think about using the developer tools in Chrome.  All figured out. Thank you.

  • Ben
    Replied on November 2, 2015 at 4:54 PM

    Thank you for updating us and I am glad to hear that you were able to find the answers that you are after.

    In order to help others that might find your thread as well there are few ways to get the info that you need.

    1st - using guide to find the ID

    This guide allows easy way for anyone that is not familiar with the IDs to get the ID of any field: How to find Field IDs & Names

    Getting the ID number we can stop using a rule definition that applies the CSS to all Matrix fields, such as this one:

    li[data-type="control_matrix"] { ... }

    but there is one point to make, when we look at their IDs, we need the first number (which is always the same for all of the entries):

    Form with multiple matrices each requiring different column widths Image 1 Screenshot 20

    Now that we know that the ID number of this field is 1 we can simply prefix the code that we have and which is applied to all fields by adding the number to the #id_ prefix, so we get:

    #id_1 { ... }     ( instead of li[data-type="control_matrix"] { ... } )

     

    2nd - using Form Designer to find the ID

    When we open Form Designer and go to the CSS tab, we can double click any field. This will right away show the ID on the right and on the left allowing us to get the ID number of the Matrix, when the code is changed as in the above example.

     

    3rd - using developer tools in your browser

    For those more used to developer tools, this is the fastest way to find the ID and change the matrix design as in the first sample.

     

    As mentioned, thank you for updating us and please do let us know if you happen to have any questions :)