How do I create employment history table with adjustable columns and rows?

  • Profile Image
    roadsideteam
    Asked on March 30, 2012 at 09:18 AM

    I can now use the matrix tool to create education and reference part of the form.  Now I'm trying to create employment history.  How do you adjust the colums in table?  

    Thanks

  • Profile Image
    idarktech
    Answered on March 30, 2012 at 09:50 AM

    Hi there,

    I guess what you mean here is adjusting textbox on your employment history matrix table? If so, please inject this css codes to your form.

    #id_48 .form-matrix-values {

    padding-left: 8px;padding-right: 8px;

    }/* 1st Column */

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

    width: 230px;

    }/* 2nd Column */

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

    width: 60px;

    }/* 3rd Column */

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

    width: 100px;

    }/* 4th Column */

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

    width: 120px;

    }

    Preview: http://www.jotform.me/form/20894078907465?, you can also copy this form is you like.

    Let us know if you need further assistance. Thanks.

  • Profile Image
    roadsideteam
    Answered on March 30, 2012 at 10:03 AM

    What is the url? www.jotform/form/123123123 does not work.  

  • Profile Image
    idarktech
    Answered on March 30, 2012 at 10:07 AM

    Hi,

    Sorry but I'm lost with your second question. Can you please provide more details? what is the URL you are asking for? Thanks.

  • Profile Image
    roadsideteam
    Answered on March 30, 2012 at 10:23 AM

    the table should look like this

    employer ________________ dates of employment    from to _________________

    address _________________ city, state, zip _________________

    supervisor _________________ phone number _________________

    job title _________________ starting wage _________________ ending wage

    description of duties _________________ reason for leaving _________________

    you get the idea.  it would probably be boxes, I just want to be able to make 2 columns and delete what i dont need.

  • Profile Image
    idarktech
    Answered on March 30, 2012 at 11:12 AM

    @roadsideteam,

    Thanks for your quick response. I would suggest to use normal text boxes for that and shrink them to align them on the same line. Here's a more detailed guide for that: http://www.jotform.com/help/90-How-to-Position-Form-Fields-on-the-Same-Line

    Sample: http://www.jotform.me/form/20894330013444?

    Is this what you are trying to achieve? Let us know if you have any further questions. Thanks.

  • Profile Image
    roadsideteam
    Answered on March 30, 2012 at 01:46 PM

    How do I get rid of the space between lines?

    Thanks

  • Profile Image
    roadsideteam
    Answered on March 30, 2012 at 02:09 PM

    Thank you idarktech for your help.  I'm trying to change the size of the boxes inside the tables.  I call them tables.   i need bigger boxes for school, address and degree.  my form again 

    http://form.jotform.us/form/20730507559151

     

    Thanks again

    Tricia

  • Profile Image
    idarktech
    Answered on March 30, 2012 at 07:59 PM

    Hi Tricia,

    Sorry for getting back to you so late. Please replace your first CSS Codes to this:

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

    /* 1st Column */.form-matrix-row-headers +.form-matrix-values .form-textbox {width: 138px;}

    /* 2nd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {width: 160px;}

    /* 3rd Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{width: 130px;}

    /* 4th Column */.form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 110px;}

    Let us know if you need any thing else. Thanks and have a great day!

  • Profile Image
    roadsideteam
    Answered on March 31, 2012 at 12:23 AM

    What is this CSS supposed to do?  Nothing worked when i did it. I still cant adjust the size of the boxes inside the table and it's driving me crazy.

    help!

    This is my form.  It looks terrible.

    http://form.jotform.us/form/20730507559151 

  • Profile Image
    idarktech
    Answered on March 31, 2012 at 12:42 AM

    @roadsideteam,

    Ok, let me please tell you that there's no direct solution for resizing text boxes on your table but it's possible with CSS Injection. The CSS I gave you will help you to control this text boxes sizes and as far as I can see it's working fine on your form.

    By looking at my CSS Codes above, you can customize the size of your columns text boxes by changing the width value (ie. first column, 138px).

    Hope this clarifies everything. Let us know if you have further questions. Thank you so much!

  • Profile Image
    roadsideteam
    Answered on April 01, 2012 at 03:49 PM

    I got it now. I'm able to change the column size.

     

    Did you help me with changing the space between lines throughtout the form?  This would make the form look much better.  

    Can you tell me where to inject the CSS?  What part of form do I select?

     

    Thanks

  • Profile Image
    gori-mathew
    Answered on April 01, 2012 at 03:54 PM

    Hi;

    On adjusting space and where to inject CSS Code, this question has been addressed in other question thread you opened. Please check on this link for reply; http://yang.jotform.com/answers/88694-How-to-adjust-the-size-of-the-space-between-lines#4

    Please lets know if you need any assistance and we are glad to know that your issue on this thread is sorted.

  • Profile Image
    jeanettebmz
    Answered on April 01, 2012 at 03:55 PM
    On regarding to how to inject the customer CSS, Please follow the guide below on how to Inject Custom CSS codes (you don't need to have selected a particular field)

    1. While  on  your form (Edit Mode), click Setup & Embed then  Preferences



    2. On the Preferences window, goto Form Styles tab and then insert your CSS Code under Inject Custom CSS Box.

    Clicking on "Close Settings" will then automatically  save the changes.

    Our forum contains various injected CSS solutions which you may find useful.
    Should you need more assistance, let us know!
    Jeanette