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 can I adjust the column widths of a specific matrix?

    Asked by etrentac on April 14, 2015 at 11:27 AM

    I am trying to adjust the matrix column widths within each specific matrix in a form. However, when I try it, it sometimes adjusts the column widths for EVERY matrix in the form. So, for example, all the matrices will have a 150px column 1, a 100px column 2, etc. But I want to be able to adjust these in each matrix. I've been using the following as an example, and adjusting the values for each #id:

    #id_88 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width : 190px !important;

    }.form-matrix-row-headers + .form-matrix-values + .form-matrix-values .form-textbox {

    width : 190px !important;

    }.form-matrix-row-headers + .form-matrix-values + .form-matrix-values+ .form-matrix-values .form-textbox {

    width : 190px !important;

    }.form-matrix-row-headers + .form-matrix-values + .form-matrix-values + .form-matrix-values + .form-matrix-values .form-textbox {

    width : 190px !important;

    }

     

     

    URL of form included.

    Thanks!

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

  • Profile Image

    Answered by chanesteves on April 14, 2015 at 12:36 PM

    Hi etrentac ,

     

    From what I understand, the CSS you gave above is just meant to change the column widths within the matrix #id_88. In that case, you have to specify/add #id_88 for each style. Otherwise, it will change the widths of the columns within other matrices.

     

    Try changing your CSS as below:

     

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

    #id_88 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width : 190px !important;

    } // 1st column

    #id_88 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values .form-textbox {

    width : 190px !important;

    } // 2nd column

    #id_88 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values+ .form-matrix-values .form-textbox {

    width : 190px !important;

    } // 3rd column

    #id_88 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values + .form-matrix-values + .form-matrix-values .form-textbox {

    width : 190px !important;

    } // 4th column

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

     

    I highlighted the changes. It should only change the widths of columns within #id_88.

     

    I hope it helps!

  • Profile Image

    Answered by etrentac on April 14, 2015 at 12:57 PM

    Yes, that is exactly what I was trying to do! Thanks for pointing out what was missing!!

     

  • Profile Image

    Answered by chanesteves on April 14, 2015 at 01:01 PM

    You're welcome!