Spacing Between Answers | XM Community
Solved

Spacing Between Answers

  • 2 September 2021
  • 13 replies
  • 636 views
R
Rank
Userlevel 3
Badge +5

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

icon

Best answer by JeremyK 3 September 2021, 15:52

View original

13 replies

JeremyK
Rank
Userlevel 5
Badge +7

Hey RyanBrickman, give this a shot.
jQuery("#" + this.questionId + " .QuestionBody").css("white-space","nowrap");
This is how my survey looks with that code implemented:
image.png

JeremyK
Rank
Userlevel 5
Badge +7

Alternatively, 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.

R
Rank
Userlevel 3
Badge +5

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.

JeremyK
Rank
Userlevel 5
Badge +7

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...
image.pngimage.png... 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*/

});

R
Rank
Userlevel 3
Badge +5

JeremyK - It worked, thank you so much, looks a lot better!

R
Rank
Userlevel 3
Badge +5

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.

JeremyK
Rank
Userlevel 5
Badge +7

Hey 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:
image.pngChange 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.

R
Rank
Userlevel 3
Badge +5

JeremyK Thank you so much!!

JeremyK
Rank
Userlevel 5
Badge +7

Not a problem, man!

R
Rank
Userlevel 3
Badge +5

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.

image.png

JeremyK
Rank
Userlevel 5
Badge +7

RyanBrickman 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!

R
Rank
Userlevel 3
Badge +5

JeremyF worked like a charm, thank you for much again!!!!

G
Badge +1

It 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 😞

Leave a Reply


Terms & Conditions