Hello
I believe what I need may require some coding/programming. The question type is a "Form Field" and one that has three labels (company name, customer name, email address), then there is the field to enter the data. I need to increase the spacing between these labels so they are completely horizontal and not layered. I attached a screen short, This way it is easier to read and not so cramped together, thanks.
Hoping that labels can be completely horizontal so there are not two layers to the lables.docx
Solved
Spacing Between Answers
Best answer by JeremyK
No, you're good, we all started there! You'll want to go to your form question, select it, and on the left side survey options, all the way at the bottom, you'll see JavaScript. This bring up a popup window... 
... that you can paste the code into. Qualtrics JavaScript has 3 "wrapper" functions, an OnLoad, OnReady, and OnUnload. Without going into the weeds, these functions will run their contained JavaScript at specific times during the page load (or unload). If you have a script that's looking for a specific item and you have it called too early before the item is ready, your script will fail; just something to be aware of.
You'll want to place your script in the OnLoad function. I'd overwrite the comment there that says "Please place your JavaScript here....". And I'd leave the bottom two functions in case you ever want to add functionality later. All together, your whole popup window should look like this. Click Save and you're done!
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#" + this.questionId + " .QuestionBody").css("white-space","nowrap");
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
+7Hey RyanBrickman, give this a shot.
jQuery("#" + this.questionId + " .QuestionBody").css("white-space","nowrap");
This is how my survey looks with that code implemented:
+7Alternatively, since that shortens the textboxes' lengths with which to answer, you may want to consider breaking these apart for shorter, more concise statements as well as cleaner data collection on the backend. Although I assume you're wanting to ask for these together or only want three statements of reason :)
So
- Company Name
- Company Address 1
- Company Address 2
- Company City
- Company State
- Company Zip
etc. Up to you, of course, but this simplifies things in a way.
JeremyK even if I shorten the text entry window the labels do not change how they are stacked. Where do I put that coding script in Qualtrics you provided, bear with me as I new to this. Thank you. I could shorten then length of the labels by separating them however that is not ideal. I appreciate your support.
+7No, you're good, we all started there! You'll want to go to your form question, select it, and on the left side survey options, all the way at the bottom, you'll see JavaScript. This bring up a popup window... ... that you can paste the code into. Qualtrics JavaScript has 3 "wrapper" functions, an OnLoad, OnReady, and OnUnload. Without going into the weeds, these functions will run their contained JavaScript at specific times during the page load (or unload). If you have a script that's looking for a specific item and you have it called too early before the item is ready, your script will fail; just something to be aware of.
You'll want to place your script in the OnLoad function. I'd overwrite the comment there that says "Please place your JavaScript here....". And I'd leave the bottom two functions in case you ever want to add functionality later. All together, your whole popup window should look like this. Click Save and you're done!
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#" + this.questionId + " .QuestionBody").css("white-space","nowrap");
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
JeremyK Wondering if you can help me again.
I have a form field question that has 28 fields. The spacing between each field is very small and hard on the eyes. Wondering if there is coding that can increase the space between each fields or specific lines. Ideally I would want to apply the increase spacing every 4th line as each items is in sets of 4. I attached a screen shot to explain, appreciate any support.
Doc1.docx.
+7Hey RyanBrickman! Try adding this to your JS on that 28-field question:
jQuery("table tbody tr:nth-child(4n)").after('
jQuery(".spacer").css("height","40px")
There's no great way to modify the table rows and achieve this effect. I tried modding the rows' top and bottom padding and didn't like the distended feel of every fourth row. Instead, I settled on injecting a blank "spacer" row into the table after each fourth line and then controlling the spacer classes default height to produce the desired result:
Change the 40px (pixels) to be whatever height you looks right to your eyes. Also, if you have multiple form questions you want to do the same effect in, you could throw a .spacer {} into the CSS and control the height for all elements with the spacer class globally across the survey. All depends on what you're looking to do.+7Not a problem, man!
JeremyK can you help me again please. I know have 5 fields (not 4) that I want to be bundled together. Would you be able to provide the coding? Appreciate it very much.
+7RyanBrickman should be a quick fix! In the first line of code:
jQuery("table tbody tr:nth-child(4n)").after('
where it says 4n, change the 4 to a 5. If you wanted groups of 8, you'd change the 4 to an 8. The nth-child is where the magic happens. This code is adding a new row to the table every 'n' elements (4,5,8, whatever number is in the nth-child parentheses) with the class "spacer". Whatever CSS is written for the spacer class is then applied to the new rows.
Hope this helps!
+1It would've been great if you posted the final solution and where did you implemented so that we could've used the same to fix the issue :(
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.