Is there a way to control the cell size of the Matrix?

  • Profile Image
    Asked on February 17, 2012 at 05:42 PM


    Seeing that my form was still experiencing problems loading and the drop down menus only work sometimes I decided to use the matrix in the Survey tools and eliminate the sliders to use less items in the form.  So far it seems like what I came up with will do the job, but the cells aren't lining up to the width of the colors.  Is there a way to fix this?

  • Profile Image
    Answered on February 17, 2012 at 07:11 PM

    Hi Marcus,

    Please inject this css code to your form. This would help you control each matrix column width. Just adjust the width value to fit it exactly on your color boxes.


    .form-matrix-values {padding-left: 8px;padding-right: 8px;}

    /* 1st Column */.form-matrix-row-headers +.form-matrix-values .form-dropdown {width: 100px;}

    /* 2nd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-dropdown {width: 100px;}

    /* 3rd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-dropdown{width: 100px;}

    /* 4th Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-dropdown {width: 100px;}


    Update: This code will only work if your matrix value type is "dropdown".

    Hope this helps. Please let us know if you need any further assistance. Thank you so much!

  • Profile Image
    Answered on February 17, 2012 at 07:48 PM


  • Profile Image
    Answered on February 18, 2012 at 01:42 PM

    ok I just got around to trying this out and I played with the numbers to see what would change so I'd know what was what and nothing happened.  So now I don't even know what this is suppose to mean or how it's suppose to effect anything... Please help..

  • Profile Image
    Answered on February 18, 2012 at 02:31 PM

    Did you inject the codes provided correctly?

    To inject custom css to your form:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea

  • Profile Image
    Answered on February 18, 2012 at 05:24 PM

    I did exactly that.... and I saw no difference in the size of the boxes, I even went to extremes to setting them at 2px then 200px just so a difference would be noticed.  I have other CSS in there too and I pasted this at the end of it, does it matter where I put the coding in? and will this one code apply to all the matrix boxes used in the form?  I also added the matrix to the lettering area and set it to be 1 cell, when this coding works will it effect those too? If so how do I isolate the cells to their own sizes? Another thing, some of the colors only have 1 or 2 colors on the last row, so the matrix used on those are less than 4 cells; how will those be effected?

  • Profile Image
    Answered on February 18, 2012 at 07:53 PM

    Hi there,

    I'm sorry, I think my CSS is wrong. Can you please try this?

    Just copy and inject again. Let us know if this doesn't do anything so we can further assist you. Thank you so much!

  • Profile Image
    Answered on February 19, 2012 at 12:32 AM

    THANKS!!!!!..... It worked... n I see how it works so I can just adjust it.... one more thing... on the left hand side I have a  .  as the name for the column because SOMETHING has to be there for it to exist, is it possible to hide that somehow so I can match it up with the left side?.. if not I'll just make the left cell a little shorter so it lines up, plus with the  .  and the  ^  being there visually the size would line up better than the right being shorter like it was before.  Thanks again!!!

  • Profile Image
    Answered on February 19, 2012 at 04:55 AM


    Please try this: 

    .form-matrix-row-headers {visibility: hidden;}

    .form-matrix-table {border-collapse: inherit;}

    .form-matrix-table {margin-left: -10px !important;}

    Hope this helps. Thanks!

  • Profile Image
    Answered on June 24, 2012 at 11:24 AM

    Can the Matrix be changed in the notification emails?


    I have tried adding in style tags and then using the code pasted above but it's not working. Any ideas?

  • Profile Image
    Answered on June 24, 2012 at 12:45 PM


    From what I can tell, there are currently no forms in either of your accounts. Could you create a sample form with a matrix field so that we can discuss how its appearance in the notification should be styled (with accompanying screenshots, if possible)?

  • Profile Image
    Answered on June 24, 2012 at 01:17 PM

    Hi Abajan


    Sorry my account name is "letwithease" and I am working on a form called "GRTH: ISoC report"

    I tried amending the HTML of the notification email, but it seems to auto add in <p> tags over the style tags.

    Just looking for a way to get more customisation on the matrix fields, ideally looking for 900px width


  • Profile Image
    Answered on June 24, 2012 at 05:56 PM


    Hi, it maybe difficult or even maybe not available yet to modify the matrix field in the email notification. I have seen a similar post with request ticket already, which tried to achieved a similar customization in the matrix field within the email message. However, that thread was about the size font of the matrix field in the email message, not the size of column width of the matrix table as what you are trying to achieve. I am not sure if the limitation applies accross the matrix field or the fonts or width only.

    I made a test, and did try modifying the email notification source by using the html tool in the message editor. I tried increasing the TD width to 900, the width increases when viewed in the editor. But when you test the form, in the email message, the matrix field was displayed in its default size.. as if the TD style was strip off.

    This is the test form. You can even check the email notification here.

    Also, in your injected CSS, the code should also be adjusted to like this

    .form-matrix-row-headers +.form-matrix-values .form-radio{

    width: 100px;


    that is, -- change the instance for form-dropdown to form-radio because you are using radion in your matrix field.

    Knowing Wayne (a.ka.a Abajan), he would probably check on this also more keenly. And you never know, he might pull-out another of his magic and come up again with an actual resolution. 

    Hope this information helps. Please inform us if you have further input or inquiry.