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 can I change the table widths of a matrix inside of Jotform

    Asked by ICMA on July 08, 2012 at 03:51 PM

    Hello.

    My form is here;

    http://form.jotformeu.com/form/21894318078361

    I need to be able to alter the table width of the individual matrix fields. I can do this in the source code outside of JotForm, but is there any way of editing these values within JotForm, and to save the edits?

     

    Many thanks

    Scott.

    Page URL:
    http://form.jotformeu.com/form/21894318078361

    Matrix JotForm table source
  • Profile Image
    JotForm Support

    Answered by jonathan on July 08, 2012 at 04:23 PM

    Hi Scott,

    Please check this thread. Perhaps the resolution offered by mliz will suffice to what you need.

    Please inform us if you have further inquiry.

    Thanks.

  • Profile Image

    Answered by ICMA on July 08, 2012 at 04:36 PM

    Hi Jonathan,

    I found that before your answer came along! The problem is I have set the 1st 2 widths and save but the changes are not being shown. I have cleared the safari cache, any ideas as to what the problem is?

     

    Thank you

    Scott

  • Profile Image

    Answered by ICMA on July 08, 2012 at 04:46 PM

    When I change the value of coulumn 2 this then overides the value of coulumn 1. What am I doing wrong?

     

    Thank you

    Scott

  • Profile Image
    JotForm Support

    Answered by jonathan on July 08, 2012 at 04:54 PM

    Hi Scott,

    I use this CSS on your clone test form. It expanded the Name and Gender column.

     

    /* 1st column */

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

    width: 200px;

    border-style: solid;

    border-width: 1px;

    border-color: black;

    }/* 2nd Column */

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

    width: 200px;

    border-style: solid;

    border-width: 1px;

    border-color: black;

    }

    Please try this code if this is what you meant to do.

     

    Please update us.

    Thanks.

  • Profile Image

    Answered by ICMA on July 08, 2012 at 05:13 PM

    Hi again,

    This is really odd, I pasted in that code and it was fine. I then added more code, and it just won't work.

    This is the code I put in:

    /* 1st column */

     

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

     

    width: 200px;

     

    border-style: solid;

     

    border-width: 1px;

     

    border-color: black;

     

    }/* 2nd Column */

     

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

     

    width: 40px;

     

    border-style: dashed;

     

    border-width: 1px;

     

    border-color: black;

     

    }/* 3rd Column */

     

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

     

    width: 40px;

     

    border-style: dashed;

     

    border-width: 1px;

     

    border-color: black;

     

    }/* 4th Column */

     

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

     

    width: 100px;

     

    border-style: dashed;

     

    border-width: 1px;

     

    border-color: black;

    }/* 5th Column */

     

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

     

    width: 100px;

     

    border-style: dashed;

     

    border-width: 1px;

     

    border-color: black;

    }/* 6th Column */

     

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

     

    width: 40px;

     

    border-style: dashed;

     

    border-width: 1px;

     

    border-color: black;

    }/* 7th Column */

     

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

     

    width: 75px;

     

    border-style: dashed;

     

    border-width: 1px;

     

    border-color: black;

    }/* 8th Column */

     

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

     

    width: 100px;

     

    border-style: dashed;

     

    border-width: 1px;

     

    border-color: black;

    }

     

  • Profile Image
    JotForm Support

    Answered by jonathan on July 08, 2012 at 05:46 PM

    Scott,

    You will have to increase also .form-matrix-values to the number of columns...

    example, in this form there are 8 columns, the .form-matrix-values appeared same number of times in the header part of the code.

    This is the code I used to achieved the screen below it.

     

    /* 1st column */

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

    width: 200px;

    border-style: solid;

    border-width: 1px;

    border-color: black;

    }/* 2nd Column */

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

    width: 40px;

    border-style: dashed;

    border-width: 1px;

    border-color: black;

    }/* 3rd Column */

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

    width: 40px;

    border-style: dashed;

    border-width: 1px;

    border-color: black;

    }/* 4th Column */

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

    width: 40px;

    border-style: dashed;

    border-width: 1px;

    border-color: black;

    }/* 5th Column */

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

    width: 100px;

    border-style: dashed;

    border-width: 1px;

    border-color: black;

    }

    /* 6th Column */

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

    width: 40px;

    border-style: dashed;

    border-width: 1px;

    border-color: black;

    }

    /* 7th Column */

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

    width: 75px;

    border-style: dashed;

    border-width: 1px;

    border-color: black;

    }

    /* 8th Column */

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

    width: 100px;

    border-style: dashed;

    border-width: 1px;

    border-color: black;

    }

     

     

    Try to copy the code I provided if it is sufficient to what you wanted already.

    Thanks.

  • Profile Image

    Answered by ICMA on July 08, 2012 at 05:53 PM

    Hey Jonathan,

    Yes, sorry I was missing that, I must be thick (you don't have to answer that :)

     

    Thank you so much,

    Scott

  • Profile Image
    JotForm Support

    Answered by jonathan on July 08, 2012 at 05:59 PM

    LOL!

    I say you're not Scott. =) Actually, thanks to you I only learned it work that way myself. Now I have added new idea to my support skill even more.

    Feel free to contact us again anytime if you have other inquiry on JotForm.

    Cheers!

  • Profile Image

    Answered by Amparo on January 24, 2013 at 06:11 AM

    Hello,

     

    In teh same topic, how can I isolate these codes for one table only?

    Thanks

     

    Amparo

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on January 24, 2013 at 09:11 AM

    Hi there, 

    In that case, you would need to select the fields by ID in stead of by CLASS.

    In each case you would need to look at the source code to identify them.  On each form it would be different, however, we'll be more then glad to assist you with that every time!

    I hope that helps.  please let us know if you need further assistance!

  • Profile Image

    Answered by earthdaysf on April 04, 2013 at 04:40 AM

    hi, i'm trying to isolate the codes for one table only, by targeting ID, and it's not working. 

    my table ID is #cid_1. the table is at 

    http://form.jotform.us/form/30930314157144

    neither of the following work:

     

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

    width:200px;

    }

     

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

    width:200px;

    }

     

    the first one is preferable, because it's simpler. 

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 04, 2013 at 04:49 AM

    @earthdaysf

    This one will work.

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

    width: 200px;

    }

    Result:

    Let us know if you have further questions. Thanks!

  • Profile Image

    Answered by earthdaysf on April 04, 2013 at 12:22 PM

    yes, the second one does work. But it does not show preview correctly in the form designer.

    Minor request: fix the designer preview.

    Second request: Your css is very awkward. Using ID's is preferable. is it possible to use CSS similar to the example below? This is much easier, because it's only necessary to change a single character (the column number) to target a different column. Thanks.

     

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

    width:200px;

    }

  • Profile Image
    JotForm Support

    Answered by Mike_T on April 04, 2013 at 02:28 PM

    We can add the feature request tickets to our system. Each question/request should be in a separate thread.

    If you would like to proceed with this, please create new threads. Then, we will be able to escalate these requests.

    Thank you.

  • Profile Image

    Answered by Spawn4ever on March 31, 2016 at 12:16 PM

    I realize this is an hold thread but i hope someone will be able to assist me.

    I'm trying to replicated the following grid using the Matrix option without succes.

     

    I've enter the CSS script in the new location found in the preferences tab but nothing is happening to the form. 

    Would anyone know what i'm doing wrong?

  • Profile Image
    JotForm Support

    Answered by david on March 31, 2016 at 03:39 PM

    Since this thread is rather old, I will move your request to a thread of its own.  I will address your question in the following thread shortly:

    https://www.jotform.com/answers/807309