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

    Change space between matrix fields

    Asked by FusionLogistics 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!

    Page URL:
    http://www.fusionlogistics.com/Forms3.html

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan 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 {

    padding-top:0px;

    padding-bottom:12px;

    padding-left:10px;

    padding-right:10px;

    }

    .form-label-top,

    .form-label-left,

    .form-label-right {

    font-weight: normal;

    /*color:#555;*/

    margin-bottom: 9px;

    }

    .form-sub-label {

    color: #8E9A96;

    }

    .form-textbox,

    .form-textarea,

    .form-radio-other-input,

    .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;}

    .form-required{

    color:#c30;

    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.

    Thanks.