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

  • Profile Image
    henryclarke10
    Asked on November 29, 2017 at 09:00 PM

    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.

  • Profile Image
    Nik_C
    Answered on November 30, 2017 at 03:25 AM

    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!

  • Profile Image
    henryclarke10
    Answered on December 04, 2017 at 10:46 PM

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

  • Profile Image
    Nik_C
    Answered on December 05, 2017 at 02:02 AM

    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.

  • Profile Image
    NeilVicente
    Answered on December 09, 2017 at 06:04 PM

    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.

  • Profile Image
    henryclarke10
    Answered on December 12, 2017 at 11:01 PM

    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!

  • Profile Image
    Nik_C
    Answered on December 13, 2017 at 01:53 AM

    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:

    1513147949Screen Shot 2017-12-13 at 7.57

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

    Let us know if that could work for you.

    Thank you!

  • Profile Image
    henryclarke10
    Answered on December 13, 2017 at 11:20 PM

    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?

  • Profile Image
    Nik_C
    Answered on December 14, 2017 at 01:24 AM

    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!