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 with different column widths.

    Asked by sonofwatt on September 27, 2012 at 03:03 AM

    Is it possible to have a matrix with different column widths?

    I have a matrix where I'm asking for Name, Age, Gender, Name of School and Grade.
    The age, gender and grade, don't need to be nearly as wide as the other two.

  • Profile Image
    JotForm Support

    Answered by idarktech on September 27, 2012 at 04:28 AM

    Hi,

    Yes, that's possible by Injecting Custom CSS Codes to your form. Replace your existing CSS codes to this:

    .form-matrix-values {

    padding-left: 8px !important;

    padding-right: 8px !important

    }

     

    /*---1st column width---*/

    .form-matrix-values .form-textbox {

    width: 150px;

    }

     

    /*---2nd column width---*/

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 50px;

    }

     

    /*---3rd column width---*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 150px;

    }

     

    /*---4th column width---*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 150px;

    }

     

    /*---5th column width---*/

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 50px;

    }

    Follow this guide: How to Inject Custom CSS Codes

    Just replace the width values in every columns so fits well. Just let us know if you need anything else.

    Thanks!

  • Profile Image

    Answered by sonofwatt on September 27, 2012 at 02:08 PM

    Oh awesome!  That worked well.

    On another forum post I found this code to shrink the header width to reduce the padding around small cells.

    .form-matrix-column-headers {width: 30px !important;}

    .form-required{

    color:#c30;

    font-weight: bold;

    }