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
    locomotivedisplaycases
    Answered on January 12, 2016 at 06:25 PM

    Hi,

    Thanks for your response, I didn't have the second matrix field, I copied the image of the existing matrix field and altered it slightly to show what I want to achieve with the order subtotal, postage and packing and order total fields, rather than have them as they appear now.

    I wasn't sure how to go about this as the three fields I want to change the appearance of are calculation fields with conditions set.

    David

  • 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
    locomotivedisplaycases
    Answered on January 13, 2016 at 07:11 AM

    Hi, that was when I was trying to find a solution to make the fields look the same, I think I am making progress, but how can I code the css so it removes the grey box and the text ' click to edit' 

  • 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!