adding space between options in MC questions with Text box entry | XM Community
Skip to main content

Hi All,

I’m trying to add space between my MC text box entry options and I have tried javascript, custom css and html but it does not seem to work. I increased space to “60” instead of 10 in the following code nd tried to “no wrap” otpion as well. Highlighted what I’ve been tryin to change. Does not help does someone know how to fix the code in Qualtrics? I’m not a coder. this was off some community posts. 

 

Qualtrics.SurveyEngine.addOnload(function() {
  // Adjust the following value (in pixels) to control the space between the options
  var spaceBetweenOptions = 10;

  // Create a style tag and add it to the head of the document
  var styleTag = document.createElement('style');
  styleTag.type = 'text/css';
  document.head.appendChild(styleTag);

  // Add CSS rules to the style tag to increase the spacing between the options
  var css = '';
  css += 'div=id^=QID]/id$=_MC] .q-checkbox, diviid^=QID].id$=_MC] .q-radio {';
  css += '    margin-bottom: ' + spaceBetweenOptions + 'px;';
  css += '}';
  css += 'divsid^=QID];id$=_MC] .q-radio, divdid^=QID]did$=_MC] .q-checkbox {';
  css += '    display: inline-block;';
  css += '    white-space: nowrap;';
  css += '}';
  styleTag.appendChild(document.createTextNode(css));
});
 

 

Hi @mdaruka,

As you have already tried fair bit of custom programming, my suggestion to add a simple “<br>” tags at the end of the option choice.

Basically <br> (which means break) adds a new line after your text, thus, may provide some blank spaces between answer options.

Ex. If you statement says “Brand I love”, your HTML view of the text should be  : 

Brand I love <br>

 Hopefully this works :)

@SaurabhPujare_Ugam  this does not seem to work either.

thanks though. 

HI @mdaruka 

Try this :

Qualtrics.SurveyEngine.addOnload(function() {
  // Adjust the following value (in pixels) to control the space between the options
  var spaceBetweenOptions = 60;

  // Create a style tag and add it to the head of the document
  var styleTag = document.createElement('style');
  styleTag.type = 'text/css';
  document.head.appendChild(styleTag);

  // Add CSS rules to the style tag to increase the spacing between the options
  var css = '';
  css += 'divvid^=QID]]id$=_MC] .q-checkbox, divvid^=QID]]id$=_MC] .q-radio {';
  css += '    margin-right: ' + spaceBetweenOptions + 'px;'; 
  css += '    display: block;'; 
  css += '    white-space: normal;'; 
  css += '}';
  styleTag.appendChild(document.createTextNode(css));
});
 

 

 

 

 

 

Hi @mdaruka,

You can do this in 2 ways,

  1. Just click on the statement and go to ‘Rich content editor’. Now after the sentence click on enter and press space once. Please refer below screenshot for your reference:

 

  1. Just click on statement and enter <br/> code as shown in below screenshot:

 

Let me know if this helps.

Just add a padding with the percentage instead of px example 10% of ul li 

example:Here 2 means the 3rd statement in the MC choices.

jQuery(‘ul li’).eq(2).css(‘padding’,’10%’)

#Use appropriate padding technique

@krbhavya 

Thanks it seems to work, is it possible to not wrap text? make them appear in one line?

@mdaruka 

You can try change this 

 white-space: nowrap

 

Hope this will work!!

@krbhavya did not work.:/ 

Leave a Reply


Terms & Conditions