Align multiple choice question text and single answer radio buttons/labels to be all horizontal? | XM Community
Skip to main content
Solved

Align multiple choice question text and single answer radio buttons/labels to be all horizontal?


I would think selecting the "Horizontal" option would do this but it doesn't -

I want to style my question to look like the attached image. I can handle styling the buttons but I am unsure how to align the text and answers to be side by side like how Qualtrics' Help pages have. See a screenshot here:

!


Note: I don't think it matters but just in case - I am loading this survey in an iframe into an existing webpage (a knowledge base).

Best answer by mattyb513

Try adding this to the question text:

```html
<style>
html .Skin .MC .SAHR .QuestionBody table td span.LabelWrapper label {
padding-bottom: 20px !important;
}
</style>
```

The problem is the padding on the bottom. I'm not sure why it's appearing incorrectly but that is what needs to be resolved.
View original

10 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5863 replies
  • July 27, 2018
I would start with a horizontal MC and do the following with JavaScript:
* Hide the question text div
* Create a new table cell at the beginning of the row and copy the question text to it
* Resize the table cells

mattyb513
Level 4 ●●●●
Forum|alt.badge.img+6
  • Level 4 ●●●●
  • 163 replies
  • July 27, 2018
Try this on for size: https://gist.github.com/mattbloomfield/c8c8172a5a606990e51f7c2038c0e0ee

Here is a working example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_019LLuIq9JoXYz3?Q_SurveyVersionID=current&Q_CHL=preview

QSF attached

  • Author
  • 4 replies
  • July 27, 2018
mattyb513 - thanks so much! I keep trying to do as much via the Advanced CSS but it's really cumbersome. Your solutions works perfectly with one exception - the text in the Yes/No buttons is not aligned vertically in the middle.

mattyb513
Level 4 ●●●●
Forum|alt.badge.img+6
  • Level 4 ●●●●
  • 163 replies
  • July 27, 2018
@mark2741 Can you show me what you are seeing in a live link?

  • Author
  • 4 replies
  • July 27, 2018
mattyb513 - thanks - here is a link to how I have it implemented:
http://help.mark2741.webfactional.com/072718-1100/150151.htm

Thanks again for your assistance!

mattyb513
Level 4 ●●●●
Forum|alt.badge.img+6
  • Level 4 ●●●●
  • 163 replies
  • July 27, 2018
> @mark2741 said:
> mattyb513 - thanks - here is a link to how I have it implemented:
> http://help.mark2741.webfactional.com/072718-1100/150151.htm
>
> Thanks again for your assistance!

Try the updated gist. I just added `padding-bottom: 20px !important` to the answer choices. I'm not positive it will work but it might.

  • Author
  • 4 replies
  • July 27, 2018
No luck - didn't work. I think I tried that myself earlier via the Advanced CSS.

mattyb513
Level 4 ●●●●
Forum|alt.badge.img+6
  • Level 4 ●●●●
  • 163 replies
  • Answer
  • July 28, 2018
Try adding this to the question text:

```html
<style>
html .Skin .MC .SAHR .QuestionBody table td span.LabelWrapper label {
padding-bottom: 20px !important;
}
</style>
```

The problem is the padding on the bottom. I'm not sure why it's appearing incorrectly but that is what needs to be resolved.

  • Author
  • 4 replies
  • July 30, 2018
Thank you for all your help mattyb! Much appreciated. The survey question looks great now!

Forum|alt.badge.img+1
  • 6 replies
  • May 11, 2021

Leave a Reply