How do you create a table with rows and columns for entering text

  • Profile Image
    amitchell
    Asked on October 24, 2011 at 07:07 PM

    I would like to create a basic table with 4 columns and 6 rows.  There will be a heading for each row.  The form is for text entering only, and I would like to change the size of each colmn. 

    I cannot see any form tools that allows you to do this.  The only way I can see is to create it through the html editor.  Is there any other way?

  • Profile Image
    paoloumali
    Answered on October 24, 2011 at 07:51 PM

    Hi,

    Please look under 'Survey Tools' in the sidebar for 'Matrix'.

    I will usually add a matrix if I need an array of arrays of data.

    Then for it to accept text, change 'Input type' from the toolbar to 'Text Box'.

    If I use a matrix for that, I will need to specify beforehand the number of rows that will be needed.

  • Profile Image
    amitchell
    Answered on October 24, 2011 at 07:54 PM

    Thanks for the quick response.  The problem with this is that I could not adjust each column's width.  they all had to be the same size. 

    Can you change the sizes fo the columns? (I need it to look similar to the screen shot I added)

  • Profile Image
    paoloumali
    Answered on October 24, 2011 at 08:13 PM

    I did inject some CSS:

     

    table.form-matrix-table th, table.form-matrix-table td {

    width:100px !important;

    }td.form-matrix-values {

    padding:0;

    position:relative;

    }

    input.form-textbox {

    width:100% !important;

    border:none;

    position:relative;

    }

    Sample Form

  • Profile Image
    amitchell
    Answered on October 24, 2011 at 08:20 PM

    Excellent, just what I need, however where/how do you inject the CSS in the matrix table

  • Profile Image
    paoloumali
    Answered on October 24, 2011 at 08:33 PM

    Here is a guide for injecting CSS.

    If you need further help, let us know.

    Thanks.

  • Profile Image
    amitchell
    Answered on October 24, 2011 at 11:36 PM

    The CCS works well however are you able to give me a link or show me the code so I can modify the size of each column. 

    Also I would like to put additional rows in the table

  • Profile Image
    mliz
    Answered on October 25, 2011 at 01:43 AM

    You can import the sample form on your account and then download the full source code  and edit it to modify the size of each column.

    Here is how you can get the form source code.Open the form on the Form Builder:

    1. Open "Setup & Embed" tab on toolbar,

    2. Click on "Embed Form"

    3. Click on "Source" and copy the code provided.

  • Profile Image
    amitchell
    Answered on October 27, 2011 at 08:19 PM

    Thanks for the information, however even with your sample form, it does not show how to change the size of individaul column widths. (your sample form has the same column widths).

    Below is a link to my form.

    <script type="text/javascript" src="http://form.jotform.com/jsform/12961803742"></script>

  • Profile Image
    abajan
    Answered on October 27, 2011 at 10:06 PM

    I'm afraid that that's not possible with the current version of our form builder unless injected CSS is used. How wide (in pixels) do you want each column to be? With that knowledge, I should be able to provide the rules you would need to inject.

  • Profile Image
    abajan
    Answered on October 27, 2011 at 10:08 PM

    Never mind. I just saw your screenshot in the first post above. I'll see what I can come up with.

  • Profile Image
    abajan
    Answered on October 27, 2011 at 10:11 PM

    LOL :)

    Disregard that last post because the table in the screenshot and form don't have the same headings. So, I still don't know how wide each column should be.

    Incidentally, to add rows to the table, click the table, click Rows in the toolbar at the top of the form builder. A new row will be created each time a new line is added.

  • Profile Image
    amitchell
    Answered on October 27, 2011 at 11:11 PM

    Thanks for your reply.

    If you could put the following (or similar), I can then manipulate to exactly how I need it.

    Column Name: 5 pixel

    Column 1 (Description): 30 pixel

    Column 2: 15 pixel

    Column 3: 10 pixel

    Column 4: 10 pixel.

    (These are just rough estimates.)

     

  • Profile Image
    abajan
    Answered on October 27, 2011 at 11:25 PM

    Are those widths correct? They seem awfully small to me. For instance, at my monitor's current resolution of 1440 X 900, 30 pixels is just about 9 mm wide, not to mention how much 5 pixels measures!

  • Profile Image
    amitchell
    Answered on October 27, 2011 at 11:34 PM

    Good point.  As a % then of the width of the page.   not sure of the pixel sizes

    (Once I know how to mainuplate the size I should be able to change easily

     

    Column Name: 5 %

    Column 1 (Description): 30%

    Column 2: 15 %

    Column 3: 10 %l

    Column 4: 10 %

  • Profile Image
    abajan
    Answered on October 28, 2011 at 12:07 AM

    Okay, if you want the table in your form to look like this, replace all of your current injected CSS with the following:

    .form-matrix-values {
    padding-left: 8px;
    padding-right: 8px;
    }

    .form-matrix-row-headers +
    .form-matrix-values .form-textbox {
    width: 180px;
    }

    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 90px;
    }

    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 60px;
    }

    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 60px;
    }

    Adjust the number portion of each value (highlighted in red) of the declaration in each rule (except the first) to suit your requirements. If you add another column to the table, just add another rule. (I'm sure you can see a pattern to the CSS above: An extra ".form-matrix-values +" line for each subsequent column.)

    Please note that if you intend to include additional tables in the form, more specificity will be required. Otherwise, the equivalent columns in all of the tables will be renedered at the same widths.

    Hopefully, this helps.

  • Profile Image
    abajan
    Answered on October 28, 2011 at 12:29 AM

    If you wish to remove those four dots to the top left of the table, go ahead and label it "Curent Tenders" or whatever you feel would be appropriate (or just leave the label at "Click to edit" if you don't want to label it anything in particular) and then inject the following extra rule:

    #label_74 {
    display:none;
    }

    Alternatively, change the declaration to visibility:hidden; depending on your preference. (See this page for a demo of the difference.)

  • Profile Image
    amitchell
    Answered on October 30, 2011 at 11:16 PM

    Thanks for your help, so close now....

    I know how to edit the size of the column widths, however how do a show the table similar to the first example you gave me where there where no boxes for each field. (single line grid fashion)

     

     

  • Profile Image
    abajan
    Answered on October 31, 2011 at 12:14 AM

    Assuming you wish to have the grid look similar to the screenshot you provided in the first post of this thread, change the first rule from this:

    .form-matrix-values {
    padding-left:8px;
    padding-right:8px;
    }

    to this:

    .form-matrix-values {
    padding:0;
    border-width:0;
    }

    Unfortunately, the results are not consistent across browsers. The grid looks okay in IE (surprisingly), Firefox and Opera but in Chrome and Safari there's a space above and below each text box. Hopefully, the CSS can be tweaked to eliminate those spaces.

  • Profile Image
    abajan
    Answered on October 31, 2011 at 12:27 AM

    I forgot to mention that in order to compensate for the removal of the 8 pixels of padding from the left and right of each text box, you'll need to reduce the form's width from 500 pixels to 436 pixels:


    (2 sides x 4 text boxes in each row x 8 pixels per side [left and right] = a difference of 64 pixels)

  • Profile Image
    amitchell
    Answered on October 31, 2011 at 06:38 PM

    Thankyou, the table works well now, however....

    We now need to put in multiple matrix tables into the same form.  Each table will have a different amount of columns.  How can you differentiate the code for multiple tables. ie: table1 has 4 columns, table2 has 2 columns (In my form example I have added another table with 2 columns)

     

     

  • Profile Image
    fxr
    Answered on October 31, 2011 at 07:39 PM

    You need to inspect the Source Code and find an ID for each of the matrixs'. 

    Open the Source Code (you can do this in most web browsers by opening the Form URL, and right-clicking then selecting View Source.)

    Now, inspect this source, scroll down to the first time you see a reference to form-matrix-table, in the code proceeding this you will see something like <div id="my_id" class="form-input-wide"> here, 'my_id' is the id of the first matrix. 

    (below is a section of your forms' code)


    Once you have that ID, you can style that matrix individually. For your form, the injected CSS needs to change to this:

     

    #cid_74 .form-matrix-values { padding:0; border-width:0; }

    #cid_74 .form-matrix-row-headers + .form-matrix-values .form-textbox { width: 180px; }

    #cid_74 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values .form-textbox { width: 90px; }

    #cid_74 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values + .form-matrix-values .form-textbox { width: 60px; }

    #cid_74 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values + .form-matrix-values + .form-matrix-values .form-textbox { width: 60px; }

     

    ----

    Once that first matrix is found and CSS updated, you can find the next instance of form-matrix-table in your form (i.e your 2nd table) 

     

    its ID is 'cid_76' . Now any other styling of those matrix classes just needs to begin with #cid_76 to 'select' that particular matrix. 

    e.g 

    #cid_76 .form-matrix-values { padding:0; border-width:5px; }

     

    Hope that helps. Just will take a bit experimentation to get the effects you want.

    Let us know if anything is unclear or need assistance with something else. 

  • Profile Image
    amitchell
    Answered on November 03, 2011 at 07:26 PM

    Thankyou, all works now  :-)

  • Profile Image
    harshu 
    Answered on January 30, 2017 at 11:25 PM

    how to create table for entering text
  • Profile Image
    liyam
    Answered on January 30, 2017 at 11:31 PM

    Hello harshu,

    This is a very old thread which you've commented on. I moved your question to a new thread. We'll respond to your question there in a short while.

    Thanks.