What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    how do i change the width of a survey matrix

    Asked by sabrina on December 22, 2011 at 05:12 PM

    Hello,

    I am using a few survey matrix on my jotform.  How can I change the width of the matrix box so they are uniform?

    Thank you,

    Sabrina

    Page URL:
    http://form.jotform.com/form/13511808859

    Screenshot
  • Profile Image
    JotForm Support

    Answered by idarktech on December 22, 2011 at 07:15 PM

    Hi Sabrina,

    You can align it by injecting this custom css code in your form.

     

    .form-matrix-row-headers{

    width:450px !important;

    }

     

    To learn how to inject custom css codes in your form, please visit this link for a guide:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    Just feel free to let us know if you have further questions. Thank you for using JotForm!

  • Profile Image

    Answered by sabrina on December 23, 2011 at 03:02 PM

    Hi idarktech -

    Thanks for your quick reply.  I changed the width settings to 690 and injected the css custom code.  Almost perfect.  The last thing I'd like to format now is the column width so that it is uniform.  Can you check out my latest version of my form and help me out again?  I can't post a screen shot on this thread.

    Thanks,

    Sabrina

  • Profile Image
    JotForm Support

    Answered by idarktech on December 23, 2011 at 05:43 PM

    Hello Sabrina,

    Sorry for my late response. You can change it to 550px so it fits on your form width. Is that what you mean on your question? Or, if you want the column A and B to be in equal size, just simply change the width to 325px.

    Here's a preview with 550px width http://www.jotform.com/form/13562834638?

    Just feel free to let us know if something is missing or need further changes. Thank you so much!

  • Profile Image

    Answered by Sabrina on December 23, 2011 at 09:11 PM

    Hi Again,

    I am specifically talking about the columns within the matrix.  For example, the column width seems to based on the length of the text labels, i.e. Classic Vanilla with Vanilla Buttercream Frosting forces the width to be wider than the matrix that has shorter text, i.e. Red Velvet. 

    Can I manually create the width of the columns regardless of the length of the text?

    Does that make sense?

    Thanks again!

    Sabrina

  • Profile Image
    JotForm Support

    Answered by idarktech on December 24, 2011 at 05:18 AM

    Hi Sabrina,

    I'm afraid that can't be handled anymore with JotForm CSS Injection. To my knowledge, you need to touch the form's source code in order to achieved that column layout but more complicated and painful.

    Don't lose your hope, because maybe some of my colleague can saved you with this. If they haved any solutions for this, they'll reply to this thread. Please stay in touch!

    Thank you for your understanding! Merry Christmas and Have a Great Holiday Season!

  • Profile Image

    Answered by mclenco on March 12, 2012 at 01:32 PM

    .form-matrix-row-headers{

    width:450px !important;

    }

     

    Worked great for the form, but is it possible to do the same in the notification email so that it prints cleaner?

  • Profile Image

    Answered by fxr on March 12, 2012 at 04:08 PM

    You have good control over the format of your email notfications. 

    If you click on Email Alerts -> then select the 'notification' name, an email composition window opens up which uses variable names for the fields on the form. As long as you remember to keep using the variable names in the email composition, you can move around the layout of that email as much as you want. 

    Have you tried experimenting with it? If you can explain exactly what way you want your data layed out, and on what form, we can try to guide you through your options.

  • Profile Image

    Answered by mclenco on March 12, 2012 at 04:20 PM

    I have customized the layout of the email notification, but the injected matrix layout css (.form-matrix-row-headers{}) does not apply.

    Therefore, when the form is opened in anything other than IE, all of my header fields are the same width, so all of the answer fields line up nicely. When emailed, they all align to the longest name.

    Ex. of them lined up. 


    aligned 

     

    Ex of the email notification (Not Aligned):

    not aligned

  • Profile Image

    Answered by fxr on March 12, 2012 at 06:37 PM

    hmm, oh right I see, unfortunately i dont really think there is going to be much we can do to rectify that problem. It would involve making changes in the backend code.