# How do I add multiple input area in one question?

**positiveplans**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.

- JotForm Support
**idarktech**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!

**positiveplans**thanks. i used the matric tool

can i adjust the columns - input area?

- JotForm Support
**idarktech**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!

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

- JotForm Support
**idarktech**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.

**positiveplans**THNAKS! WORKED!

- JotForm Support
**idarktech**Great!

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

**positiveplans**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

- JotForm Support
**idarktech**@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;

}

**positiveplans**- JotForm Support
**idarktech**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.

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

- JotForm Support
**EduardoMendez**Hello there!

Here is a form with the 6 column matrix -

**Summary of Educational Experience**fieldThis 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!

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

- JotForm Support
**EduardoMendez**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

- JotForm Support
**EduardoMendez**Please take a look at this form to fully understand what this code accomplishes.

**positiveplans**THANKS!

- JotForm Support
**EduardoMendez**On behalf of my colleague idartech, you are welcome! :)