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 increase font size of text in Matrix table

    Asked by Jw_Law on April 22, 2014 at 05:37 AM
    However, I would also like to know whether is there a way to increase the font size of all rows and columns for the text in the matrix table? I'm currently doing it manually by adding the <font size> tag in every sentences.
  • Profile Image
    JotForm Support

    Answered by jonathan on April 22, 2014 at 05:45 AM

    Hi,

    Please add a CSS code like this to the form

    .form-matrix-table {

    font-size: 16px;

    }

    You can adjust the font-size number according to your preference.

    I tried this on a test form, and it look like this

     

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

    Guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by Jw_Law on April 24, 2014 at 03:18 AM

    Hi, thank you for this. I would also like to know whether is it possible to use a different font size for the rows and columns? I would like to maintain the font size for my rows but a slightly smaller font for the text in my columns.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 24, 2014 at 07:02 AM

    Hello Jw_Law,

    Yes it is possible. Please inject the following custom css to change the font size of matrix row and column headers (you can change the font sizes as per your requirement):

    .form-matrix-column-headers

    {font-size: 16px !important;}

     

    .form-matrix-row-headers

    {font-size: 11px !important;}

     

    Following guide should help you inject custom css in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Jw_Law on April 24, 2014 at 10:35 AM

    Hi, thank you very much. Your support team has been nothing but super helpful to us, especially user with zero coding basis. Thank you !

     

    One more question, will I be able to unbold the texts in the row of the matrix table? As it is bold by default.

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 24, 2014 at 11:43 AM

    @Jw_Law

    Add this CSS code to your form. Just pick which one you'd like to unbold. :)

    /*-unbold rows-*/

    .form-matrix-row-headers {

    font-weight: normal;

    }

    /*-unbold columns-*/

    .form-matrix-column-headers {

    font-weight: normal;

     

    }

    Regards!

  • Profile Image

    Answered by Jw_Law on April 24, 2014 at 11:50 AM

    Hi thanks, I added this code into CSS code form but i don't see any changes hmm? How do i pick the ones that i wish to unbold, are there suppose to be some id tag or sort? As I wish to unbold everything in the matirx rows.

     

    Thank you.

  • Profile Image

    Answered by Carina on April 24, 2014 at 12:54 PM

    Perhaps the text wasn't bold. You can make a test by changing the code given by my colleague and changing the value into bold, to see if there is any change:

    /*-unbold rows-*/

    .form-matrix-row-headers {

    font-weight: bold;

    }

    /*-unbold columns-*/

    .form-matrix-column-headers {

    font-weight: bold;

     

    }

     

    To unbold all the rows you can use this code:

    /*-unbold rows-*/

    .form-matrix-row-headers {font-weight: normal;}

    /*bold columns-*/

     

    .form-matrix-column-headers {font-weight: bold;}

     

    You can test the final result here.

    Let us know if further support is needed.

    Thank you

  • Profile Image

    Answered by Jw_Law on April 25, 2014 at 12:23 AM

    Hi Carina, the unbold codes that were given by you worked !.

    Thank you !!!