Dynamic Matrix Setup

Hi.

I have created a matrix that captures text. However it is too long for the form, how do i make it work? 

My form is here: https://form.jotform.com/80658401014953

Could you please follow the instructions given below.

1) Click on the Matrix Dynamique widget and click on Widget Settings.

2) go to Custom CSS tab. Paste here the code given below and update widget:

table {

    width: 100%;

}

table tr td,

table tr th {

    width: 75px;

    word-wrap: break-word;

font-size: 12px;

    display: inline-block;

    margin-top: 2px;

}

/* for button*/

table tfoot tr{

text-align: left;}

3) Now, go the Form Designer. Go to CSS tab. Paste the following code into CSS codes section and save it:

.form-input-wide div {

}

#cid_2 div.form-buttons-wrapper {

}

.form-line {

}

#id_9 iframe {

    width : 100% !important;

}

you can also observe the steps by using the gif given below:

The result should look like this:

you can take a look at the demo form and clone it if you need to:

https://www.jotform.com/80713017423952

you might need to take a look at these guides:

Form Designer Tutorial: Let's create fantastic forms!

How to Inject Custom CSS Codes

How to Clone an Existing Form from a URL

thanks. it works. but i have since added another column. could you help me adjust it please.

https://form.jotform.com/80658401014953

Could you please follow the instructions given below again.

1) Click on the Matrix Dynamique widget and click on Widget Settings.

2) Go to Custom CSS tab. Paste here the code given below and update widget:

table {width: 100%;}

table tr{text-align:left;}

 

table tr td,

table tr th {

    width: 70px;

    padding:0 2px;

    text-align:center;

    word-wrap: break-word;

    font-size: 12px;

    display: inline-block;

    margin-top: 2px;

}

 

/* for button*/

table tfoot tr{

    text-align: left;

}

demo form:

https://form.jotform.com/80741105223949