-
GTAUSTINAsked on April 19, 2017 at 1:20 PM
I am trying to match the Configurable List widget style to the rest of the forms style (i.e. the box sizes, font size, color). Also, I am trying to get this form to break the lines apart like they would be if each of the inputs were separate. I am redoing this form, and I am just trying to get it to look nicer and have less.
All the information is pertaining to page two of the document (student information).
Basically what I have below.
I do know that things like the phone number look different, but I am ok with that.
Page URL: https://form.jotform.us/22005915237144 -
GTAUSTINReplied on April 19, 2017 at 1:41 PM
-
Nik_CReplied on April 19, 2017 at 2:51 PM
1) Do you want to have the configurable list widget's width match the below fields or 2) you want fields from the configurable list to be each in a new row?
The second one is a bit tricky but it is doable.
Please let us know.
Also, we didn't receive your second reply, if you can please resend it.
Thank you!
-
GTAUSTINReplied on April 19, 2017 at 3:56 PM
The second one you mentioned is what I want it to look like.
My second response was added to my original question, but I didnt know how to delete the initial second response, so I just left it blank.
-
Kevin Support Team LeadReplied on April 19, 2017 at 6:36 PM
Could you please try injecting the following CSS code to your widget?
/* Custom injected CSS code*/
th {
display: none;
}
tr {
display: block;
}
.col1:before, .col2:before, .col3:before, .col4:before,.col5:before{
font-weight: bold;
display: block;
}
/* Naming the fields*/
td.col1:before {
content:"Student Name";
}
td.col2:before {
content:"Grade";
}
td.col3:before {
content:"Birthday";
}
td.col4:before {
content:"Student Phone #";
}
td.col5:before {
content:"Student Email";
}
/* Positioning the fields in multiple columns*/
td {
display: block;
}
To inject the code to the widget you only need to click on the wizard icon and go to the Custom CSS tab:
Then you need to disable the fields label for the widget:
Here's a sample form about how this will work: https://form.jotformpro.com/71087092101952
Hope this helps.