Aligning text vertically in column multiple choice response | XM Community
Skip to main content
Solved

Aligning text vertically in column multiple choice response

  • October 30, 2018
  • 5 replies
  • 558 views

I was told by Qualtrics help that I can't format text inside columns to align vertically to top of column. Here is a snapshot of what I currently have but I want the four columns to have text aligned to top of the column to match "Excel" category. I am guessing I need to insert HTML code using the rich text editor in each column but I tried valign=top and vertical align=top and it doesn't do anything to move the text up. Can someone help me please? Thanks so much! !

Best answer by PraDeepKotian_XM

> @mlankau said: > Thanks for responding so quickly. Unfortunately, the CSS code did not work to make the text move to the top of each column in the column choices. I can get the text up by putting in the blank spaces but that is time-consuming as I have to put in spacing then check alignment over and over again; is there a code I can put in when I open the html view of each column choice that speeds up the process? Thanks again, this is my first time on the Qualtrics community and you both made me feel supported! > > ! > Here is the code for single answer choice type of questions: .SingleAnswer { padding-top: 0px; padding-bottom: 90px; height: 400px; } note: adjust the height as per your text & please check that you apply in the same required question otherwise it will apply in other similar question !

5 replies

Forum|alt.badge.img+12
  • QPN Level 3 ●●●
  • October 31, 2018
if CSS is not working then easiest way (work around) to add some blank space at the end of label " (semicolon)" (please put ";" at the end) so that width of each labels are same and hence alignment would work fine

PraDeepKotian_XM
QPN Level 5 ●●●●●
Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • October 31, 2018
Hi @mlankau , Add below code in Look & Feel->Style->Custom CSS(this will apply in survey for all multiple choices) .MultipleAnswer { padding-top: 0px; padding-bottom: 90px; height: 400px; } note: adjust the height as per your text

  • Author
  • October 31, 2018
Thanks for responding so quickly. Unfortunately, the CSS code did not work to make the text move to the top of each column in the column choices. I can get the text up by putting in the blank spaces but that is time-consuming as I have to put in spacing then check alignment over and over again; is there a code I can put in when I open the html view of each column choice that speeds up the process? Thanks again, this is my first time on the Qualtrics community and you both made me feel supported! !

  • October 31, 2018
Hello @mlankau , Paste the below code in the end line of the each option with variable height value ( based on the UI ) in source(<>) mode of Rich content Editor of option. Also, while testing please test in the preview not in the survey eeditor ` <span style="display:block; height: 500px;"> </span>`

PraDeepKotian_XM
QPN Level 5 ●●●●●
Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • Answer
  • November 1, 2018
> @mlankau said: > Thanks for responding so quickly. Unfortunately, the CSS code did not work to make the text move to the top of each column in the column choices. I can get the text up by putting in the blank spaces but that is time-consuming as I have to put in spacing then check alignment over and over again; is there a code I can put in when I open the html view of each column choice that speeds up the process? Thanks again, this is my first time on the Qualtrics community and you both made me feel supported! > > ! > Here is the code for single answer choice type of questions: .SingleAnswer { padding-top: 0px; padding-bottom: 90px; height: 400px; } note: adjust the height as per your text & please check that you apply in the same required question otherwise it will apply in other similar question !