-
comoapproachAsked on March 13, 2018 at 2:20 AM
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
-
tina JotForm DeveloperReplied on March 13, 2018 at 8:38 AM
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
-
comoapproachReplied on March 15, 2018 at 11:35 PM
thanks. it works. but i have since added another column. could you help me adjust it please.
https://form.jotform.com/80658401014953
-
tina JotForm DeveloperReplied on March 16, 2018 at 2:11 AM
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