Customizing drop down on Qualtrics | XM Community
Skip to main content

Hello!

1. how do I change the width of a drop down multiple question type using custom CSS?

2. secondly I want to be able to map a state to its unique LGA on qualtrics. For example if I have a drop-down with Country Nigeria, I should be able to see only the states unique to Nigeria.

how do I achieve the two above. Please I need help

Hi @Adedamola 

For your first request you can add the following in your question text HTML view.
<div id="QID1" class="QuestionBorder"> <!-- Insert your question ID -->
    <!-- Question content -->
</div>

Then add the following in your CSS code in the look and feel section.
#QID1 select {
    width: 300px; /* Adjust the width as needed */
}

For your second request do you want the states to appear in the dropdown itself as a subgroup? You can also create multi choice questions below your main dropdown question with the answer choices as the states specific to that of the country selected. Then add ‘In-Page’ display logic as per requirement and do not add page breaks between them.


Hi @omkarkewat thank you 

I really do not understand how to use the Q1D1 on qualtrics. I have tried it before and doesn’t seem to work for me. I do not think I understand what you have explained for my second question. 
 

And yes I want the states to appear as a subgroup of the selected country.

 

 


Hi @omkarkewat to provide more context to my first question , when I want to use custom CSS to style the Text field question type on Qualtrics, I use the below 

<style> 

.Skin .TE .SL .InputText { 

width: 100px;

}
</style>

using the above I am able to target the Text field type. But I do not know how to target the drop down using same format.

 

 

 


@Adedamola 
QID is the unique question ID each question has. Find out the QID of the question you want to apply the CSS code. You can do this by turning on Support Mode, by clicking ‘ctrl + shift + tools menu’ (at the top in the survey builder section) and you will be able to see the QID of that question. Insert that QID in the code that I provided and it should work.
About your second request, can you elaborate more like where do you want the Nigerian states to appear.


@Adedamola,

Q1 - You can change the width of dropdowns (selects) with:

.Skin select {width: 250px;}

If you want to limit it to a specific page, add the CSS to the question text inside a <style> tag (in HTML view).

Q2 - You can use a Drill Down question.


@TomG  thanks for this. your solution works fine for my first question. However I have looked at the drill down question type and I don’t think it is tidy. Imagine having all the countries and assign their specific states to them using the drill down question type. That would be so long. 


@Adedamola 
QID is the unique question ID each question has. Find out the QID of the question you want to apply the CSS code. You can do this by turning on Support Mode, by clicking ‘ctrl + shift + tools menu’ (at the top in the survey builder section) and you will be able to see the QID of that question. Insert that QID in the code that I provided and it should work.
About your second request, can you elaborate more like where do you want the Nigerian states to appear.

@omkarkewat thank you. So I want the Nigerian states to appear in another drop down list.


@TomG your solutions work perfectly. I just tried the drill down option again and it worked perfectly. Thank you Somuch


Leave a Reply