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

    Adjusting matrix with CSS code

    Asked by jsaffir on December 31, 2013 at 08:54 PM

    I have adjusted my matrix with css code to make the columns different widths.  I have 11 columns.  The first 8 are adjusted to my satisfaction.  The last 3 are the same widths no matter what I do.  This is wierd because it was working fine, and then all of the sudden the last 3 columns were all equal in width and I'm unable to change them.  

     

    Here is my form:

    http://form.jotform.us/form/33645970074156

     

    Thanks for any help.  Your program and help are incredible!

    Page URL:
    http://form.jotform.us/form/33645970074156

    css code JotForm different thanks
  • Profile Image
    JotForm Support

    Answered by Welvin on December 31, 2013 at 10:14 PM

    Hi,

    What was the desired width? This is the codes that controls the width of the last 3 matrix:

    /*---9th column width---*/

    .form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 100px;}

    This is the codes currently on your form custom CSS codes. Adjust the value in you need it.

    Thanks

  • Profile Image

    Answered by jsaffir on January 01, 2014 at 12:15 PM
    This seems to be the same as what I had. It’s not controlling the last 3 columns. I want the 7th column to be 10px, the 8th to be 20px, and the 9th to be 150px.
    Sent from Windows Mail
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on January 01, 2014 at 01:27 PM

    Hi,

    Can you please check this form: http://www.jotformpro.com/form/40005137256949. The 7th Column is already in 10px, the 8th column is adjusted to this form and the 9th column is already at 150px. So now, how about the 10th and 11th?

    I am now confused since you mentioned from your first post that you do not have the control to the last 3 columns.

    If you want to adjust the widths of the 9th, 10th and 11th columns, do it this way:

     

    /*---9th column width---*/

     

    .form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 150px;}

     

    /*---1oth column width---*/

     

    .form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 150px;}

     

    /*---11th column width---*/

     

    .form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 150px;}

     

    Add this to your form custom CSS codes and adjust the widths per your requirements. You already made it but just had to add this codes to control the individual widths.

    Thanks

  • Profile Image

    Answered by jsaffir on January 01, 2014 at 01:42 PM
    Thank you so much. I apologize for being a bit dense, but it’s fixed!
    Sent from Windows Mail
    ...