Width of choices in Drill down question | XM Community
Question

Width of choices in Drill down question

  • 2 August 2023
  • 2 replies
  • 47 views

Userlevel 3
Badge +4

Hello everyone,


I would like to fix the width of my choice columns in a drill down question.

but the JavaScript below won’t work.

jQuery("#"+this.questionId+" .c1").css("width","100px");

 

In fact, I would like to use the right scripts to fix the same first column width in all my tables, i.e. Matrix, SBS, Form Field and Drill Down.

 

Can you please help me for these scripts?

Thanks for your help.

Gilles


2 replies

Userlevel 6
Badge +18

Hi @Gilles,

You can add below code under the onReady() function of the JS.

Note:- This code will only work for Drill Down question, for other question type you can check the class of the selection (ex. dropdown) and replace the same accordingly in the below code.

jQuery(".drillDownSelectDropDown").css("width","500px")

Output:-
 

 

Userlevel 5
Badge +14

To fix the width of choice columns in a drill down question, you can use the following JavaScript code

Qualtrics.SurveyEngine.addOnload(function() {
  // Replace 'yourQuestionId' with the actual question ID of your drill down question
  var questionId = 'yourQuestionId';

  // Replace '100px' with the desired width for the first choice column
  jQuery("#" + questionId + " .c1").css("width", "100px");
});

To set the same first column width for all your tables (Matrix, SBS, Form Field, and Drill Down), you can use the following script:

Qualtrics.SurveyEngine.addOnload(function() {
  var tableContainers = ['.QuestionTable', '.QuestionBody']; // Add more container classes if needed

  // Replace '100px' with the desired width for the first column
  var desiredWidth = '100px';

  for (var i = 0; i < tableContainers.length; i++) {
    jQuery(tableContainers[i]).each(function() {
      jQuery(this).find('.c1').css('width', desiredWidth);
    });
  }
});

 

This script will loop through the specified container classes (.QuestionTable and .QuestionBody), and for each table, it will set the width of the first column (.c1) to the desired width (100px in this example). You can add more container classes to tableContainers if you want to target additional question types.

Make sure to replace '100px' with the desired width for the first column in all tables.


 

 

Leave a Reply