How can I adjust the text field of the matrix?

  • Profile Image
    AnndeGroot
    Asked 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.

  • Profile Image
    Charlie
    Answered 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
    AnndeGroot
    Answered 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
    candy
    Answered 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.