How to drop and center one answer choice on a new line | XM Community
Skip to main content
Question

How to drop and center one answer choice on a new line

  • October 1, 2021
  • 2 replies
  • 112 views
S
Forum|alt.badge.img

Hello everyone! I recently found this post helpful regarding how to drop one answer choice to a new line but I have a follow-up question. I have a similar question layout and needed one answer to be below all of the others. I've created my columns and moved one to the second line as shown below.
image.pngNow, I'd like to center that bottom choice under the other options. Has anyone used custom code to accomplish this?
I am very new to custom coding but tried increasing the padding using the code below, which worked but caused both choices in the first column to widen, not just the one on the bottom as intended.
image.pngimage.png
How would I go about getting only the "Did not find what I was looking for" choice to be centered across the bottom? Is there a different custom code or question layout format that would help me accomplish this?

Shashi

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • February 6, 2023

Hi there, if you still need, this can be put in place by using JS to move that answer option beneath the question answers and then using CSS to adjust its height. Adapted from here.
To give it a try, first create a Multiple Choice question that is set to Answer Type = Allow one answer, Number of choices = 6, and Alignment = Horizontal.
Next, add the below to the OnReady section of the question's JavaScript:
var qid = this.questionId;
var cont = '#'+qid+' > div.Inner.BorderColor.SAHR > div > fieldset > div';
var opt6 = '#'+qid+' > div.Inner.BorderColor.SAHR > div > fieldset > div > table > tbody > tr > td:nth-child(6)';
jQuery(opt6).detach().appendTo(cont);
Finally, add the below CSS to the Style section of the survey's Look & Feel, updating the QID for your question:
@media only screen and (min-width: 481px) {

#QID25-6-label { 
height: 60px !important;
}

}
Opt6_Detach.png

grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • grahulp5
  • QPN Level 3 ●●●
  • February 7, 2023

Even though you're trying to center a choice it will be shown as a simple categorical question in all mobile devices. I'd suggest to keep the choices vertical so it's been shown constant throughout.

P
Terms & ConditionsAccessibility statement