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).
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).
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.
+27I 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
+6Try 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.
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!
+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.
+6Try 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.
+1https://www.qualtrics.com/community/discussion/comment/4200#Comment_4200You save me as well!! Thank you so much!😉
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.