- AustralianMusicFoundationAsked on April 08, 2014 at 11:58 AM
I need to reduce the spacing around the text fields in my form, as the whole form is too space out, when there is a mix of text boxes, radio button and text fields.
I have tried the various solutions on the forums to inject the CSS code to reduce the .form-line and setting margins and padding to 3px (for example).
This reduced the space between actual input items but not for text fields.
You can see the issue on the screen shot - the space between 'Musical Direction'; 'Other Funding' and 'Referee 1' is too big compared with the space between the other lines.
Can you please help.
- walledgardenAnswered on April 08, 2014 at 12:19 PM
You can actually set the spacing between questions. To do that, click on "Setup and Embed" tab. Then click on "Preference" option. A window will up, choose "Field Styles", below that you will see "Question Spacing" with it's default value. You can set it to a lower value until you reached your desired spacing. Mine, I set it to 2px 2px 2px 2px.
Hope this helped you!
- AustralianMusicFoundationAnswered on April 08, 2014 at 12:30 PM
Thanks walledgarden. That didn't seem to change anything. It is the padding around the text fields I think that needs to specifically change
- walledgardenAnswered on April 08, 2014 at 12:47 PM
What's the CSS code you injected?
That's the closest you can get to the label. To test if the CSS is working, you can increase the value to say, 30px, you will notice that the spacing between the label and the field will be farther. Set it back to 2px and that is the closest you can obtain.
- walledgardenAnswered on April 08, 2014 at 01:22 PM
I see what you mean now, "Referee 1" is actually a text not a label, that's the confusion. Unfortunately, there is no way to adjust the spacing. We can tweak it though, the only problem with this solution is that we can't make the word "Referee 1" in green. If black is alright with you, you can try to insert this code directly to the name label:
<font size="6" color="green"><i>Referee 1</i></font><br>Name
Insert the given code directly to the label of the "Name" Field under referee 1. If your satisfied with it, you can do the same thing to the rest, replacing the words "Referee 1" and "Name" on the given code.
- AustralianMusicFoundationAnswered on April 08, 2014 at 01:23 PM
The problem is I can't identify the field ID - when you click on Show Properties icon, you do not get these.
I've tried just entering #musical direction but this didn't work
- walledgardenAnswered on April 08, 2014 at 01:27 PM
Actually, you won't be needing the ID for the field. You see the word "Name" below your Referee 1 section? You can edit the label of your first field "Name", right? Delete the word "Name" and instead, use the code provided above. That will make the space between Referee 1 and Name closer to each other.
- walledgardenAnswered on April 08, 2014 at 01:44 PM
See the screenshot of my work around below:
If you notice, I eliminated the space between the words "Referee 1" and "Name" below it.
- AustralianMusicFoundationAnswered on April 08, 2014 at 01:45 PM
Thanks that last solution works - and it comes out green. I just need to play around with the other fields in that row to even out the spacing
I'm experimenting with inserting just <br>Title etc for the other fields to line them up
- walledgardenAnswered on April 08, 2014 at 01:53 PM
Yes, that's right. I'm glad you liked my solution. You can do the same thing on the other Headings and field labels above your form.
- JotForm Support ManagerJeanetteAnswered on April 08, 2014 at 02:20 PM
We are very glad to see Bryan helped you with the solution. If further questions are needed, let us know.