Align multiple choice question text and single answer radio buttons/labels to be all horizontal? | XM Community
Skip to main content
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).
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
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
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.
@mark2741 Can you show me what you are seeing in a live link?
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!
> @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.
No luck - didn't work. I think I tried that myself earlier via the Advanced CSS.
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.
Thank you for all your help mattyb! Much appreciated. The survey question looks great now!

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

Leave a Reply


Terms & Conditions