-
meganthackerAsked on January 17, 2018 at 12:31 PM
The building process is wonderful, but I would like to make the input field wider so that the person filling out the form can see what they have typed so far.
-
Nik_CReplied on January 17, 2018 at 1:00 PM
Please insert the below CSS into your Custom CSS field:
#input_7_0_0,#input_7_0_1,#input_7_0_2,
#input_7_1_0,#input_7_1_1,#input_7_1_2,
#input_7_2_0,#input_7_2_1,#input_7_2_2,
#input_7_3_0,#input_7_3_1,#input_7_3_2,
#input_7_4_0,#input_7_4_1,#input_7_4_2,
#input_7_5_0,#input_7_5_1,#input_7_5_2 {
width:90px!important;
}
It will work like this:
Let us know if you need any further assistance.
Thank you!
-
meganthackerReplied on January 17, 2018 at 2:41 PM
Thank you so much! I have one more question. How do I go about changing the width of the question listed in the actual row? And is it possible to only make one of the column text fields wider?
-
Nik_CReplied on January 17, 2018 at 3:28 PM
Yes, you can change the width of the actual text:
By inserting the below CSS in your custom CSS field:
th.form-matrix-row-headers {
width: 150px!important;
}
Just adjust the number.
Regarding the text boxes here are the CSS codes for each row:
Yes:
#input_33_0_0,
#input_33_1_0,
#input_33_2_0,
#input_33_3_0,
#input_33_4_0,
#input_33_5_0,
#input_33_6_0,
#input_33_7_0,
#input_33_8_0 {
width:50px!important;
}
No:
#input_33_0_1,
#input_33_1_1,
#input_33_2_1,
#input_33_3_1,
#input_33_4_1,
#input_33_5_1,
#input_33_6_1,
#input_33_7_1,
#input_33_8_1 {
width:50px!important;
}
Explain:
#input_33_0_2,
#input_33_1_2,
#input_33_2_2,
#input_33_3_2,
#input_33_4_2,
#input_33_5_2,
#input_33_6_2,
#input_33_7_2,
#input_33_8_2 {
width:50px!important;
}
Just change the numbers for width accordingly.
Let us know if you have any further questions.
Thank you!
-
meganthackerReplied on January 18, 2018 at 10:37 AM
Thank you again for your help! Everything worked, except for when I put in this code:
th.form-matrix-row-headers {
width: 150px!important;
}
In the editing viewer, only the input tables adjusted like I wanted them to.
But as soon as I leave editor and preview the form, it changed the width of the question texts on all questions.
I'm very unfamiliar with coding, so again I appreciate the help!
Here's my URL: https://www.jotform.com/build/80156344000846
-
Nik_CReplied on January 18, 2018 at 11:49 AM
For that particular field, this CSS would work to decrease the width of the text:
#cid_33 > table > tbody > tr:nth-child(2) > th {
width: 100px!important;
}
I inserted that CSS to your Custom CSS Field:
Please check and let us know if that works for you.
Thank you!
-
meganthackerReplied on January 18, 2018 at 12:01 PM
I'm sorry, I wasn't clear enough. The width of the question within the input table was fine the way it was (340px), but the bold text above the input table (and most other questions in bold) is what is now too narrow.
Here is what it looks like in the editor (the way I want it to look):
And here is what it looks like in view mode:
-
Nik_CReplied on January 18, 2018 at 12:28 PM
I'm sorry for the misunderstanding, I inserted this CSS:
.form-label.form-label-auto {
display: inline!important;
}
That should fix the labels.
Please check and let us know how it worked.
Thank you!