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 to change the size of numeric text box in matrix field?

    Asked by swapna_summit on April 20, 2016 at 04:21 AM

    Hi, I know that this is an older post but related to query I have again.

     

    My numeric textbox matices have somehow sized themselves up and I have tried everything to make them smaller.

     

    I have used the insert you suggested above but with the matrix ID:

    #id_680 .form-matrix-values input[type="tel"] {

    width: 25px !important;}

    #id_681 .form-matrix-values input[type="tel"] {

    width: 25px !important;}

    #id_682 .form-matrix-values input[type="tel"] {

    width: 25px !important;}

    nothing happens, I have also inserted this above the code where I am background colouring these matrices, 

    Please advise?

    matrix field change size CSS
  • Profile Image

    Answered by swapna_summit on April 20, 2016 at 04:34 AM

    Hi, 

    Thanks for this, please help?

  • Profile Image
    JotForm Support

    Answered by Charlie on April 20, 2016 at 04:44 AM

    May we know what form you are referring to? I checked the form titled "DEV-FTG_ignite! Online Evaluation Template_Form1_61094060902549_20160419", however you have a lot of matrix fields there that uses different types of input. 

    You are also using a lot of custom CSS code, so if there are multiple CSS codes that style the same field, then there might be a conflict to which CSS code should be implemented.

    For the numeric text box in the matrix field, I believe the correct input type should be "number". So the CSS code you have should be like this:

    #id_680 .form-matrix-values input[type="number"] {

        width: 25px !important;

    }

    #id_681 .form-matrix-values input[type="number"] {

        width: 25px !important;  

    }

    #id_682 .form-matrix-values input[type="number"] {

        width: 25px !important;

    }

     

    However, if you have other CSS code resizing those text boxes, then they might be causing a style conflict. Let us know if the above code works.

  • Profile Image

    Answered by swapna_summit on April 20, 2016 at 04:56 AM

    Hi Charlie, 

     

    This is perfect! Thank you!!

     

    Worked like a charm, and yes, that is the form im working on ,

     

    Thanks,

  • Profile Image
    JotForm Support

    Answered by Charlie on April 20, 2016 at 05:00 AM

    You are welcome. I'm glad it worked :)

    Should you need our assistance again, please feel free to drop by here in the forum.

    Thank you.

  • Profile Image

    Answered by swapna_summit on April 20, 2016 at 06:58 AM

    Hi again, 

    On the same form, I have added more columns to the matrix on page 2. when i publish this and view the form in the browser, 

    the matrix shifts to the line below. i have tried making the checkboxes smaller - i think I need to rezise the matrix to be a little smaller as well. have also tried making the form bigger

     

    Please help,

  • Profile Image

    Answered by Ben on April 20, 2016 at 08:31 AM

    I took a look at the mentioned form: http://www.myjotform.com/form/61094060902549 and based on what you said and I see on the form I believe that you want to show 2 different matrix fields in the same row.

    Since that is a different subject than the original on this thread I have to move it to a new thread. As such you can find the new thread on the following link: https://www.jotform.com/answers/822699 where we will be assisting you shortly.