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

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

M
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).
icon

Best answer by mattyb513 28 July 2018, 13:49

View original

10 replies

TomG
Rank
Userlevel 7
Badge +27
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
Rank
Userlevel 6
Badge +6
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
M
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
Rank
Userlevel 6
Badge +6
@mark2741 Can you show me what you are seeing in a live link?
M
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
Rank
Userlevel 6
Badge +6
> @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.
M
No luck - didn't work. I think I tried that myself earlier via the Advanced CSS.
mattyb513
Rank
Userlevel 6
Badge +6
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.
M
Thank you for all your help mattyb! Much appreciated. The survey question looks great now!
A
Badge +1

https://www.qualtrics.com/community/discussion/comment/4200#Comment_4200You save me as well!! Thank you so much!😉

Leave a Reply


Terms & Conditions