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

    How can I adjust the text field of the matrix?

    Asked by AnndeGroot on November 01, 2016 at 11:55 PM

    I have created a Matrix in my form and I need to duplicate that Matrix several times in the same Form (session 1, session 2, etc) but when I duplicate the Matrix, the sizes of the columns are changing. I tried to adjust the CSS codes, but it's all the same.

    Page URL:
    https://www.jotform.com//?formID=63038885401457

    css code adjust how how can i
  • Profile Image
    JotForm Support

    Answered by Charlie on November 02, 2016 at 06:19 AM

    May I know what you are trying to adjust? If you could provide us more details of what you would like it to look like, that will help us to better assist you.

    Currently, this is how your matrix fields looks like:

     

    Please note that the CSS code that you currently have only applies to one matrix field, your CSS code is using IDs, so it is not applicable to other matrices. You need to get the specific IDs or Class names of the other matrices if you want to style them. 

    For example, if you want to make all the text box inside the matrix field to have the same length, then this CSS code will work:

    table.form-matrix-table > tbody > tr > td > input {

      width: 70px !important;   

    }

    It simply states that make all the input text box of matrix fields to width of 70px. Here's how it looks like when applied on a cloned form: https://form.jotform.com/63062161894962 

    Let us know if that helps.

  • Profile Image

    Answered by AnndeGroot on November 03, 2016 at 12:44 AM
    Dear Charlie,
    I would like to adjust each text boxes inside of the Matrix to different
    size. The first box a little bit bigger and the other 2 a little smaller.
    How to do that?
    Best regards,
    Ann
    ...
  • Profile Image
    JotForm Support

    Answered by candy on November 03, 2016 at 07:19 AM

    Hello Ann,

    I've cloned your form in order to test it on my side. I've injected the following CSS codes into the form:

    .form-matrix-column_0{

    width:300px !important;

    }

    .form-matrix-column_1{

    width:30px !important;

    }

    .form-matrix-column_2{

    width:30px !important;

    }

    And then, I have got the matrix as you can see the following screenshot:

    You can change the width of the fields above as you have wanted.

    Please check again, if you need further assistance do not hesitate to contact us.

    Thanks in advance.