How do I add multiple input area in one question?

  • Profile Image
    positiveplans
    Asked on October 24, 2012 at 07:17 PM

    See the link below - what if i ask the question

    list of team player - and i want name, age, gender, grade and average, score

    all in different boxes side by side - like a chart.

  • Profile Image
    idarktech
    Answered on October 24, 2012 at 07:35 PM

    Hi there,

    There are two ways to achieved this. You can use textboxes and shrink them to align them on the same line. Check this guide: http://www.jotform.com/help/90-Field-Positioning

    Another way is by using Matrix tool under Power Tools, after that change the matrix input type to textbox. Check this visual guide:

    Thanks!

  • Profile Image
    positiveplans
    Answered on October 24, 2012 at 09:22 PM

    thanks.  i used the matric tool

    can i adjust the columns - input area?

  • Profile Image
    idarktech
    Answered on October 24, 2012 at 09:38 PM

    Hi,

    Good! To adjust it's column widths, you have to Inject Custom CSS codes to your form. It's pretty easy, use this CSS codes.

    .form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

     

    /* 1st Column */

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

    width: 100px;

    }

     

    /* 2nd Column */

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

    width: 100px;

    }

     

    /* 3rd Column */

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

    width: 100px;

    }

     

    /* 4th Column */

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

    width: 100px;

    }

    Follow this guide: How to Inject Custom CSS Codes

    I have labeled each column css so you can adjust each column width values (100px) if necessary. Thanks!

  • Profile Image
    positiveplans
    Answered on October 24, 2012 at 09:48 PM

    hey THANKS  - i did and changed the fist column to 200 but not hing changes? what am i doing wrong?

  • Profile Image
    idarktech
    Answered on October 24, 2012 at 09:55 PM

    My bad! I've provided you the wrong code, really sorry. Please use this instead:

    .form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

     

    /* 1st Column */

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

    width: 100px;

    }

     

    /* 2nd Column */

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

    width: 100px;

    }

     

    /* 3rd Column */

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

    width: 100px;

    }

     

    /* 4th Column */

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

    width: 100px;

    }

    It's obvious that you are using textbox but I've provided you the code for dropdown fields. Sorry about that.

  • Profile Image
    positiveplans
    Answered on October 24, 2012 at 10:07 PM

    THNAKS!  WORKED!

  • Profile Image
    idarktech
    Answered on October 24, 2012 at 10:38 PM

    Great!

    Just let us know if you need anything else. Thanks!

  • Profile Image
    positiveplans
    Answered on October 24, 2012 at 11:29 PM

    Yes - one more - what if i have varying matrices with varying sizes of input area?

    the one i have right now is 4 columns at 100 px ea.

    what if i wanted another matrix with 6 columns at 60 px ea.

    Thanks

  • Profile Image
    idarktech
    Answered on October 24, 2012 at 11:52 PM

    @positiveplans,

    That's still posible by declaring matrix field ID (see example below). May we know the name of the form with 6 columns so we can check it on your account and provide you the css codes? Thanks!

    e.g.

    /* 1st Column */

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

    width: 100px;

    }

  • Profile Image
    positiveplans
    Answered on October 24, 2012 at 11:54 PM
  • Profile Image
    idarktech
    Answered on October 25, 2012 at 12:11 AM

    For clarification, is it for your  Summary of Educational Experience field? I can't seem to find 6 column matrix with your form as of checking. 

    Thank you.

  • Profile Image
    positiveplans
    Answered on October 25, 2012 at 02:16 PM

    Yes it was - but I made it 4 columns just to reach my deadline.  I woudl prefer six columns.  thanks

  • Profile Image
    EduardoMendez
    Answered on October 25, 2012 at 02:57 PM

    Hello there!

    Here is a form with the 6 column matrix - Summary of Educational Experience field

    This is the CSS for the form.

    You will see that I have followed the drections of idarktech to accomplish this:

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

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

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

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

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

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

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

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

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

    /* 5th Column */#id_49 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 50px;}

    /* 6th Column */#id_49 .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: 50px;}

    Let us know if you need further assistance!

  • Profile Image
    positiveplans
    Answered on October 25, 2012 at 09:22 PM

    so will this keep my four columns as it is and allow me to do six colums as well?

  • Profile Image
    EduardoMendez
    Answered on October 25, 2012 at 10:39 PM

    Hi there,

    Yes, Here is a visual explanation of the CSS code:

    #id_49 is the ID of the last Matrix field on your form.

    Let us know if you need further assistance

  • Profile Image
    EduardoMendez
    Answered on October 25, 2012 at 10:41 PM

    Please take a look at this form to fully understand what this code accomplishes.

    http://form.jotformpro.com/form/22986178420965

  • Profile Image
    positiveplans
    Answered on October 25, 2012 at 10:58 PM

    THANKS!

  • Profile Image
    EduardoMendez
    Answered on October 25, 2012 at 11:03 PM

    On behalf of my colleague idartech, you are welcome! :)