Hi,
I am trying to use the Select2 for a drilldown question and to add a search box for the first level of drilldown.
Using the forum posts i was able to get this to work, however after adding the script and checking in preview i see the format for the first dropdown is different from the survey theme. The font and font size and the dropdown border look and feel is all different.
Can someone let me know on how i can align or change this ?
Thanks,
Rakesh
Best answer by Tom_1842
I don’t think :second is selecting the second drilldown select, but you can use .eq() instead. Try using the below to apply the select2 styling to both drilldown selects:
jQuery("#"+this.questionId).find('select').eq(0).select2({
width: "150px"
});
jQuery("#"+this.questionId).find('select').eq(1).select2({
width: "150px",
//disable search//
minimumResultsForSearch: -1
});
+44Hello
Would you be able to provide an example of what you’re seeing?
Additionally what code you have used for the same.
Hello
I am using the below in the Header:
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
And for the specific drilldown question, i am using the following JS in the addonready
var options = {
placeholder: 'Select an option'
};
jQuery("#"+this.questionId).find('select:first').select2({options});
jQuery("#"+this.questionId).find('select:second').select2({options});
With regards to the look and feel i have shared a screenshot below.
The company name field is the first row in the drilldown question and it now has a search box for the respondent to filter and select the option. However the format of the dropdown for company name is now different from the Project ID field.
I would like to align the font, font size and the dropdown border to align with the “Project ID” field.
+28I don’t think :second is selecting the second drilldown select, but you can use .eq() instead. Try using the below to apply the select2 styling to both drilldown selects:
jQuery("#"+this.questionId).find('select').eq(0).select2({
width: "150px"
});
jQuery("#"+this.questionId).find('select').eq(1).select2({
width: "150px",
//disable search//
minimumResultsForSearch: -1
});
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.