How to adjust multiple choice button width for one question only? | XM Community
Skip to main content
Michael_Cooksey
Administrator
17 days ago
Solved

How to adjust multiple choice button width for one question only?

tonydonato
Forum|alt.badge.img+2

Hi, I would like to adjust the width of the multiple choice button shown in the picture to be the same width as the text boxes. I have this set up as two different questions to display together on the same page: the form fields on top and a multi select multiple choice with only one answer option (with the question text set to white) below. I assume this can be done with javascript on the multiple choice question, but every option I have tried from searching this site and others has failed so far. Thanks.

 

Best answer by Chee Heng_SZ

Hi,

I found these code while browsing through other threads.

Hope it helps.

MCQ’s choice width and hiding of question text:

Qualtrics.SurveyEngine.addOnload(function() {
/* This line to hide the question text of MCQ*/
	jQuery("#"+this.questionId).find(".QuestionText:first").parent().hide();
/* change the 100px to something else to fit your form field width*/
	jQuery("#"+this.questionId+" .ChoiceStructure").css("width","100px");
});

Form field’s text box width, reduce space at bottom and hiding the statements:

Qualtrics.SurveyEngine.addOnload(function() {
/*This line to reduce the space at the bottom*/
	jQuery("#"+this.questionId+" .QuestionBody").css("padding-bottom","0px");
/*This line to hide first column's statement*/
	jQuery("#"+this.questionId+" td:not(.ControlContainer)").hide();
/*This line to change the width of form field text box to a fixed value of 100px*/
	jQuery("#"+this.questionId+" .InputText").css("width","100px");
});

 

View original

2 replies

C
Level 4 ●●●●
Forum|alt.badge.img+16

Hi,

I found these code while browsing through other threads.

Hope it helps.

MCQ’s choice width and hiding of question text:

Qualtrics.SurveyEngine.addOnload(function() {
/* This line to hide the question text of MCQ*/
	jQuery("#"+this.questionId).find(".QuestionText:first").parent().hide();
/* change the 100px to something else to fit your form field width*/
	jQuery("#"+this.questionId+" .ChoiceStructure").css("width","100px");
});

Form field’s text box width, reduce space at bottom and hiding the statements:

Qualtrics.SurveyEngine.addOnload(function() {
/*This line to reduce the space at the bottom*/
	jQuery("#"+this.questionId+" .QuestionBody").css("padding-bottom","0px");
/*This line to hide first column's statement*/
	jQuery("#"+this.questionId+" td:not(.ControlContainer)").hide();
/*This line to change the width of form field text box to a fixed value of 100px*/
	jQuery("#"+this.questionId+" .InputText").css("width","100px");
});

 

tonydonato
1 person likes this
  • tonydonato
    tonydonato
tonydonato
Forum|alt.badge.img+2
  • tonydonato
  • Author
  • 2 replies
  • March 4, 2025
Chee Heng_SZ wrote:

Hi,

I found these code while browsing through other threads.

Hope it helps.

MCQ’s choice width and hiding of question text:

Qualtrics.SurveyEngine.addOnload(function() {
/* This line to hide the question text of MCQ*/
	jQuery("#"+this.questionId).find(".QuestionText:first").parent().hide();
/* change the 100px to something else to fit your form field width*/
	jQuery("#"+this.questionId+" .ChoiceStructure").css("width","100px");
});

Form field’s text box width, reduce space at bottom and hiding the statements:

Qualtrics.SurveyEngine.addOnload(function() {
/*This line to reduce the space at the bottom*/
	jQuery("#"+this.questionId+" .QuestionBody").css("padding-bottom","0px");
/*This line to hide first column's statement*/
	jQuery("#"+this.questionId+" td:not(.ControlContainer)").hide();
/*This line to change the width of form field text box to a fixed value of 100px*/
	jQuery("#"+this.questionId+" .InputText").css("width","100px");
});

 

This worked perfectly, thank you!

Leave a Reply


Terms & Conditions