Adjust column size on an Input Table

Hello,

I want to adjust the column size to make column 1 smaller and the others bigger. Essentially i just need the "corrective actions column to be bigger.

Hello Joel,

Thank you for reaching out to Jotform Support. I’m sorry you're having difficulties with this. I found a way to change the width of the columns. By injecting the CSS code below:

}

.form-textbox {

}

.form-matrix-headers form-matrix-column-headers form-matrix-column_0 label {

}

#input_58_0_0 {

  width : 100% !important;

}

.form-matrix-table tbody {

}

.form-matrix-headers.form-matrix-column-headers.form-matrix-column_0 {

  width : 25% !important;

}

#cid_58 th.form-matrix-headers {

}

Let me show you how to do it:

1. Go to Form Designer.
2. Click on Styles.
3. Enter the CSS Code.

Here are the results after adding the code:

Give it a try and let us know if you need any other help.

Hey Sim,

Thanks for the help. That get's me close but is there a way to shrink column 1 (just the number column) even further so there is just enough space to show the number?

Thanks again!!

Hi Joel,

Thanks for reaching out to Jotform Support. I understand you are looking to set the width of the first column to a minimum. This can be fixed by adding custom CSS to your form. Check out the steps below to see how it's done:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, paste the code below into the Inject Custom CSS area.

/*Reduce column width to minimum - 13343201*/

th.form-matrix-headers.form-matrix-row-headers {

    padding-left: 2px;

    padding-right: 2px;

}

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

Thanks Afzal!!

We are almost there, now I want to take that extra space we've created and make the "corrective action column as large as we can. The assigned to column in the right size and the project and actual completion date column can be shrunk a bit if possible.

Thanks!!

Hi Joel, 

Thanks for getting back to us. You can make the "Corrective Action" column wider by injecting the CSS code in your form below:

/* Adjust Corrective Action column width - 13343201 */

.form-matrix-column_0 {

min-width: 200px !important;

}

Result:

Give it a try and let us know how it goes.

Hey,

I believe I followed all the instructions correctly. When I am in the form under the edit function nothing has changed. However when I hit preview form everything looks the way I want it.

Hi Joel, 

Thanks for getting back to us. To avoid any confusion, I moved your other question to a new thread. You can check that out here.

Let us know if you need any other help.