How can I adjust the text field of the matrix?

  • ToniaJensen
    Asked on November 1, 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.

  • Charlie
    Replied on November 2, 2016 at 6: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:

    How can I adjust the text field of the matrix? Image 1 Screenshot 40

    How can I adjust the text field of the matrix? Image 2 Screenshot 51

    How can I adjust the text field of the matrix? Image 3 Screenshot 62

     

    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.

  • ToniaJensen
    Replied on November 3, 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
    ...
  • candy
    Replied on November 3, 2016 at 7: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:

    How can I adjust the text field of the matrix? Image 1 Screenshot 20

    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.