Need help to align the column in a side by side question | XM Community
Skip to main content
Solved

Need help to align the column in a side by side question

  • February 17, 2021
  • 3 replies
  • 512 views

Forum|alt.badge.img+5

Hello Everyone,
I am need of help to align the columns in a side by side question.
The below are the scenario for a side by side questions in the survey i am building, there are four possibilities.
1) Label + 2 Choice (Drop Down List)
2) Label + 2 Column (Free Text)
3) Label + 1 Column (Free Text) + 1 Choice (Drop Down List)
4) Label + 1 Column (Free Text)
Can someone please help with a Javascript with which i can define the width for the Question Label, Free text box etc..

Qualtrics Help.PNG
When i inspect the elements, sometime i see the code with WidthStrut, in somecases i dont see them, there is style element with width in %

I have Added this javascript at the question level :
var lwidth = "250px";    //width of labels
var cwidth = "350px";    //width of labels
jQuery("#"+this.questionId+" tr.Headings"+" .WidthStrut").css("width", lwidth);
jQuery("#"+this.questionId+" th.SBS1"+" .WidthStrut").css("width", cwidth);

In Qualtrics Preview, when i inspect the element the below is what i see. Can someone tell me what i am doing wrong ?


In Computed i see the width to be 352px, not using he below width of 250px as defined

 
 
Test Test
 


Best answer by rakeshdayalan19

Ada114,

This is the code i used :
In the header question of the page i used the below:

i set the page width to 1100 PX. Then the following code at the question level for each side by side question.
----------------------
jQuery("#"+this.questionId+" td.c1").css("width", "260px");
jQuery("#"+this.questionId+" th.SBS1").css("width", "40%");
jQuery("#"+this.questionId+" th.SBS2").css("width", "40%");   

For Column 1 i set it 260 PX as based on the description size (shorter or longer - this will stay fixed). so the Side by Side Question choices will use the rest of the space based on %

View original

3 replies

Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • 2028 replies
  • February 17, 2021

The width of each column can be changes by dragging the line next to it.
image.png


  • 5 replies
  • March 26, 2021

Forum|alt.badge.img+5

Ada114,

This is the code i used :
In the header question of the page i used the below:

i set the page width to 1100 PX. Then the following code at the question level for each side by side question.
----------------------
jQuery("#"+this.questionId+" td.c1").css("width", "260px");
jQuery("#"+this.questionId+" th.SBS1").css("width", "40%");
jQuery("#"+this.questionId+" th.SBS2").css("width", "40%");   

For Column 1 i set it 260 PX as based on the description size (shorter or longer - this will stay fixed). so the Side by Side Question choices will use the rest of the space based on %


Leave a Reply