jsPsychSurvey dropdown: width issue?

[ChristopheBossens]

Hi,

I am in the process of converting some of our surveys to the updated jsPsychSurvey plugin but I ran into an issue using the dropdown survey component. For some reason I cannot set the width properly so it shows way to small:

I am including the following resources:

<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/@jspsych/[email protected]/css/survey.css">

and using the following code to display the dropdown:

let dropdown = {
        type: jsPsychSurvey,
        survey_json: {
            showQuestionNumbers: false,
            "elements": [
                {
                    "type": "dropdown",
                    "name": "car",
                    "title": "Which is the brand of your car?",
                    "isRequired": true,
                    "showNoneItem": true,
                    "showOtherItem": true,
                    "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
                }
            ],
            "showQuestionNumbers": false,
            "fitToContainer": true
        }
    }

I have been playing with the min and minWidth properties of the dropdown element but they do not seem to have any effect. Any ideas on what I am doing wrong here?

[Shaobin-Jiang]

Use this in your css:

.jspsych-question-content {
    min-width: 50% !important;
}

[becky-gilbert]

Yikes, thanks for flagging this @ChristopheBossens! I'll include a fix in the next release.

[becky-gilbert]

In the meantime, you can fix this by adding questionDescriptionLocation: "underInput" to the survey_json:

let dropdown = {
  type: jsPsychSurvey,
  survey_json: {
    showQuestionNumbers: false,
    questionDescriptionLocation: "underInput",
      "elements": [
      // ... etc ...

[Shaobin-Jiang]

I tried this and it does not work for me.

[becky-gilbert]

Apologies, you're absolutely right @Shaobin-Jiang. (The reason the "questionDescriptionLocation" change worked for me was because I had a long description in my example, and the description text was extending the width of the input element when its location was "underInput".)

I agree with your solution of adjusting the width of the jspsych-question-content class. I used width: 100%, which gives me this:

Sorry again about this - I'll fix it ASAP!

[becky-gilbert]

@ChristopheBossens @Shaobin-Jiang I'm putting together a fix for this here: #3287 which adds width: 100% to the jspsych-question-content class. If either of you are unhappy with this solution can you please let me know? Thanks!

[Shaobin-Jiang]

LGTM.

[becky-gilbert]

Hi @ChristopheBossens, this problem should now be fixed in the latest survey-plugin release: https://github.com/jspsych/jsPsych/releases/tag/%40jspsych%2Fplugin-survey%401.0.1 Please let me know if this works for you!