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

    Customize Matrix Textboxes Width

    Asked by swapna_summit on July 01, 2014 at 03:52 AM

    Hi

    We need to format a specific matrix tables textboxes width. We have tried the following options but they have not resulted in any changes.

    #cid_21 #form-matrix-column_1  .form-textbox {width:200px;}

    #cid_21  .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {

    width:200px;

    }

     

    #cid_21 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox

    {width: 200px;}

     

    #cid_21 #form-matrix-column_1  .form-textbox {

    width:200px;}

     

    Please see below for an example of the table.

     

    Please advise on what we need to do.

     

    Thanks so much.

     

    Kind Regards

    --------------------------------------------------------------------------------------------

    http://pastiebin.com/53b274f135c3d

    textboxes style size name label
  • Profile Image
    JotForm Support

    Answered by Welvin on July 01, 2014 at 05:21 AM

    What is the form URL? You have to target the main ID, in that case, you should use the following:

    For First Column:

    #id_21 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width: 200px !important;

    }

     

    For the Second Column:

    #id_21 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values .form-textbox {

    width: 200px !important;

    }

     

    If you need to apply it to the 3rd, 4th and so on, just add three (3) .form-matrix-values to adjust the 3rd column.

     

    Let us know if you need any further assistance.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on July 01, 2014 at 05:23 AM

    Here's an example form with custom widths for each column for a specific matrix table: http://www.jotformpro.com/form/41812452898968

    Thanks

  • Profile Image

    Answered by swapna_summit on July 02, 2014 at 04:04 AM

    Hi thanks for the reply

    I injected the Code and it works for the 2nd 3rd and the 4rth column and it does not working while i put for the first column like this:

     

    #id_21 .form-matrix-row-headers + .form-matrix-values + .form-textbox {

    width: 20px !important;

    }

     

     

    form url : http://www.jotform.com//?formID=41773621486561

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 02, 2014 at 07:51 AM

    @swapna_summit

    There's a plus sign (+) before the .form-textbox class on your code. Removing it should fix the problem.

    Here's the corrected code:

    #id_21 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width: 20px !important;

    }

    Regards!

  • Profile Image

    Answered by swapna_summit on July 02, 2014 at 07:56 AM

    Hi could you please write the coding that should affect all the matrix cell width to 23px for a numeric text box in matrix

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 02, 2014 at 09:13 AM

    Here's the code for that.

    .form-matrix-values .form-number-input {

    width: 23px !important;

    }

    Cheers!

  • Profile Image

    Answered by rebekah405 on April 08, 2015 at 02:38 PM

    I also need to format a specific matrix tables textboxes' width but I can't figure out what css code I should use. I tried following the steps above but I'm not sure how to locate the main id and how to customize.

    Here is the form link: http://form.jotform.us/form/50963867216161

    and here is a shot of what the matrix curently looks like, I want the fillable text box width much wider. Can we make it show the entire data that is entered (it can get lengthy)?

  • Profile Image
    JotForm Support

    Answered by david on April 08, 2015 at 04:44 PM

    Hi,

    I have moved your request to a thread of its own so that we may address it properly.  We will follow up with our response here:

    http://www.jotform.com/answers/548755