Matrix with different column widths.

  • Profile Image
    sonofwatt
    Asked 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
    idarktech
    Answered 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
    sonofwatt
    Answered 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;

    }