This only started happening when i started using Select2. Select2 seems to work fine in other drop downs I have. Is there a way for me to hard code the width of the drop down in?
!
Thank you!
Cameron
Best answer by TomG
View original
Sizing my drop down Menu
So i am having some issues with a dropdown menu i have. Essentially what is happening is the menu is not sized correctly to fit the choices.
This only started happening when i started using Select2. Select2 seems to work fine in other drop downs I have. Is there a way for me to hard code the width of the drop down in?
!
Thank you!
Cameron
This only started happening when i started using Select2. Select2 seems to work fine in other drop downs I have. Is there a way for me to hard code the width of the drop down in?
!
Thank you!
Cameron
Userlevel 7
+27
https://select2.org/appearance#container-width
@TomG or @CameronBudd would you mind helping me getting this to work as well?
Specifically, I run the 'select2' with the following details:
HEADER
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <link rel="stylesheet"
QUESTION JAVASCRIPT
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId).find('select:first').select2();
});
QUESTION TYPE
I am running it as a Multi Select Box.
This works, and follows @TomG's great input in other threads. Yet, I fail to 'integrate' the width part after following the external link above. Currently, the width is not large enough. Can you please advice? Also, I am certainly not an expert in this game, so the more specific you can be the better - I appreciate it!
Specifically, I run the 'select2' with the following details:
HEADER
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <link rel="stylesheet"
QUESTION JAVASCRIPT
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId).find('select:first').select2();
});
QUESTION TYPE
I am running it as a Multi Select Box.
This works, and follows @TomG's great input in other threads. Yet, I fail to 'integrate' the width part after following the external link above. Currently, the width is not large enough. Can you please advice? Also, I am certainly not an expert in this game, so the more specific you can be the better - I appreciate it!
Apologies - in the header, I have the following:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <link rel="stylesheet"
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <link rel="stylesheet"
- it cuts off parts of the element I have in the header. I am very sorry for the inconvenience and all these messages.
Userlevel 7
+27
@Dennis_Jacobsen,
You specify the width in the select2 options object. Something like this:
```
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId).find('select:first').select2({width:"100%"});
});
```
P.S. On the Community, to post code like above, put in "fences" like this:
\\`\\`\\`
paste your code here
\\`\\`\\`
You specify the width in the select2 options object. Something like this:
```
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId).find('select:first').select2({width:"100%"});
});
```
P.S. On the Community, to post code like above, put in "fences" like this:
\\`\\`\\`
paste your code here
\\`\\`\\`
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.