Format certain fields to achieve same appearance as Matrix

  • Profile Image
    David Smith 
    Asked on January 12, 2016 at 11:32 AM

    I am building a simple order form with a matrix forming the basis of the order questions.

    I have added some fields underneath the matrix which I would like to 'style' as illustrated in the last screenshot. I'm sure there is a solution  - but I have been unable to figure out the css coding - can you help?

  • Profile Image
    david
    Answered on January 12, 2016 at 02:16 PM

    Hi,

    I checked your form and it looks like you removed the second matrix field.  In any case, since all your fields are set to 100% width, you would need to set the width of the second widget field manually through CSS.  If you would like to add the field back to your form, we will be happy to help you adjust the CSS to make it match the layout of the matrix currently in your form.

  • Profile Image
    Chriistian
    Answered on January 12, 2016 at 10:41 PM

    Hi,

     

    I checked your form and it looks like you have already added the second matrix fields per your specifications.

     

     

    Do inform us if you need further assistance with your form,
    Regards.

  • Profile Image
    EltonCris
    Answered on January 13, 2016 at 10:51 AM

    While I can't find that particular matrix field in your form anymore, please use the following CSS code and replace the field ID number of the target field.

    #id_10 th.form-matrix-column-headers.form-matrix-column_0,

    #label_10 {

        display: none;

    }

    Replace the number 10 (mark in bold) with the field ID number of the matrix field that you want to remove its first column header and its label. You should be able to find the ID number on the field properties (right click the field > edit properties).

    Let us know if you need further help. Thanks!