DropDown field: Set to show one visible option, but it is showing multiple

Hello,

I have a dropdown widget on this form that I previously had the Multiple Selections option turned off on and it looked fine, like this. But after turning the Multiple Selections option on (so more than one answer can be selected), it's now showing multiple options at once, like this. The Visible Options setting is set to 1 so that shouldn't be the reason. 

I would like the field to look the way it does in the first screenshot, where only the question shows and you have to click the dropdown. Any help would be greatly appreciated!

Thanks very much for reading.

I checked the issue you described, and I there is an issue with how the dropdown field is showing the visible options.

I will forward this issue to our backend team for further checking.

We'll notify you once the issue is resolved.

Thank you!

Any update on this? Is there possibly some modification that could be made as a workaround?

I'm sorry, but we don't have any updates on this matter. The issue is still being worked on.

Thank you for your patience.

This behavior of the "multiple" dropdown is intentional because in a usability point of view, it does not make sense to show only one row when the user have to scroll to see the other options.

Furthermore, judging from your post I can tell that a single row multiple dropdown is not what you need.

This checkbox in dropdown widget is what I think best suits your needs.

Please check out this demo form and let us know what you think.

I agree the Checkbox in Dropdown widget would be a better fit for the form, so I tried adding one in place of the multiple dropdown and while functionally it works great, it doesn't match the look of the other fields. Do you know how I could modify this widget so that it appears full-width, and matches the height and colors of the other fields?

Here's the form I'm currently working with: https://form.jotform.com/73459141456157

Thanks for all the help so far!

You can add the following CSS to your Custom CSS Field in order to make the field wide enough:

iframe#customFieldFrame_35 {

    margin-left: -53.6%!important;

    width: 1079px!important;

    margin-bottom: -2%!important;

}

Here is how it works:

You can check my form as well: https://form.jotform.com/73460953965973

Let us know if that could work for you.

Thank you!

The width looks fine on desktop but it's unreadable on mobile: https://www.screencast.com/t/SNA1vBM1 Do you know what I change so that it's usable on mobile?

Yes, sorry for that.

Please insert this CSS code as well:

@media only screen 

  and (min-device-width: 320px) 

  and (max-device-width: 950px)

{

  iframe#customFieldFrame_35 {

    width: 388px!important;

    margin-bottom: -2%!important;

    margin-left: -4px!important;

}

}

That will fix the dropdown field on mobile phones.

Let us know if you have any further questions.

Thank you!