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

    I need help removing the headings on matrix field and changing width of input boxes

    Asked by Cattfoundation on June 09, 2016 at 10:03 AM

    Hi All,

    I understand how to insert custom CSS and can work with it if someone helps me write it, so I am not completely helpless, but I could use a hand!  I am trying to create a matrix 15 cells wide and three columns high. This will be used for single letter/number input to help people indicate writing on an engraved brick. Hope that makes sense. I used the following: 

    table.form-matrix-table th, table.form-matrix-table td {width:100px !important;}td.form-matrix-values {padding:00;position:relative;}input.form-textbox {width:100% !important;border:none;position:relative;}

    which I got from this very useful forum...BUT - I don't want headings on either the rows or columns and I want the cells to be larger, at least wider. Any help is so appreciated. Thank you!

    Melis

     

    Screenshot
    textbox matrix field remove heading adjust width
  • Profile Image
    JotForm Support

    Answered by Welvin on June 09, 2016 at 11:46 AM

    If you want to the matrix to be like the following:

    Simply inject the following custom CSS codes to your form:

    .form-matrix-column-headers {

    display: none;

    }

    .form-matrix-row-headers {

        display: none;

    }

    .form-matrix-values input {

        width: 32px;

    }