Change space between matrix fields

  • Profile Image
    Asked on August 24, 2012 at 05:48 PM

    Hi, I'm hoping you can tell me how to change space between the fields in a matrix. I have tried injecting css to alter the column headers, th and td, but cannot figure it out. Top half of the screenshot is what it currently looks like, and I want it to look like the bottom half that I manipulated in photoshop. Thanks!

  • Profile Image
    Answered on August 24, 2012 at 06:26 PM

    There are already some CSS code injected on the form that is causing the matrix field to be spread out similar to the current screen capture you provided.

    I alter the CSS code to like this...


    .form-all {

    font-family: Arial,Helvetica,sans-serif !important;


    .form-line {








    .form-label-right {

    font-weight: normal;


    margin-bottom: 9px;


    .form-sub-label {

    color: #8E9A96;





    .form-captcha input {

    font-family: Arial,Helvetica,sans-serif;

    background-color: transparent;

    color: #8E9A96;

    border: 1px solid #5b6867;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;


    .form-dropdown {

    font-family: Arial,Helvetica,sans-serif;

    color: #8E9A96;

    background-color: transparent;

    border: none;


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



    font-weight: bold;


    And the matrix become like this...


    I merely changed the code for .form-matrix-column-headers. Since I do not want to mess the other code you injected because you probably need it to stylize your form, I only show you the part where you can adjust the code for the matrix.

    Please inform us if you further inquiry.