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

    Matrix Width Problem

    Asked by memorays on January 08, 2013 at 01:33 PM

     

    Here are two pictures of my matrix.  1st column is fine in the jot form software, but in the wild, it becomes the default size.

    In Jot Form

     

     

    The difference is in the first column.

    Below is the CSS Code I am using.  Tell me how to fix this please.  Thank you.

     

    html {

    background: url(http://www.jotform.com/uploads/memorays/30048043849959/223242351317968844/form_white_grad.png)

    repeat fixed;

     

    }/* 1st matrix's rules */

    #id_50 .form-matrix-values .form-textbox {

    width: 700px;

    }#id_50 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }#id_50 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

     

    }/* 2nd matrix's rules */

    #id_51 .form-matrix-values .form-textbox {

    width: 700px;

    }#id_51 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }#id_51 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

     

    }/* 3rd matrix's rules */

    #id_52 .form-matrix-values .form-textbox {

    width: 700px;

    }#id_522 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }#id_52 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

     

    }}/* 4th matrix's rules */

    #id_61 .form-matrix-values .form-textbox {

    width: 350px;

    }#id_61 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

    }#id_61 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

     

    }}}/* 5th matrix's rules */

    #id_64 .form-matrix-values .form-textbox {

    width: 350px;

    }#id_64 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

    }#id_64 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

    }

    Page URL:
    http://form.jotformpro.com/form/30067878517968?

    Screenshot
  • Profile Image
    JotForm Support

    Answered by idarktech on January 08, 2013 at 02:09 PM

    Hi,

    There's a clear error with your CSS codes. I have highlighted it below. 

     

    html {

    background: url(http://www.jotform.com/uploads/memorays/30048043849959/223242351317968844/form_white_grad.png)

    repeat fixed;

    }/* 1st matrix's rules */

    #id_50 .form-matrix-values .form-textbox {

    width: 700px;

    }#id_50 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }#id_50 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }/* 2nd matrix's rules */

    #id_51 .form-matrix-values .form-textbox {

    width: 700px;

    }#id_51 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }#id_51 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

     

    }/* 3rd matrix's rules */

    #id_52 .form-matrix-values .form-textbox {

    width: 700px;

    }#id_522 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }#id_52 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 700px;

    }} /* 4th matrix's rules */

    #id_61 .form-matrix-values .form-textbox {

    width: 350px;

    }#id_61 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

    }#id_61 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

    }}} /* 5th matrix's rules */

    #id_64 .form-matrix-values .form-textbox {

    width: 350px;

    }#id_64 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

    }#id_64 .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 350px;

    }

     

    -------------------

    You have too much curly brackets "}" on some of your codes. Removing it should fixed the matrix width.