Dropdown With Multiple Selection Has Broken UI

greetings,

i am trying to add multiple selections in the dropdown, but it didn't work after i set up it,

you can see below, once the multiple selctions used, the shape of the dropdown menu in the preview mood damged and i cant use the dropdown menu or to multi select choices.

Hi Ayman,

I would suggest updating the value under Visible Options to 5 since your dropdown element has 5 options. Here's how to do it:

1. In Form Builder, click on the Dropdown element to select.

2. On the right side of the selected Dropdown element, click on the Gear icon.

3. On the right panel, go to Advanced tab.

4. Update Visible Options to 5.

Result:

Give it a try and let us know how it goes.

thanks Christopher,

i did it but, it didnt become a dropdown menu!, it became a list with a slider bar without even a multiple select option.

Hi Ayman,

I tested your form and opened it on my Form Builder to see if I can replicate the issue, but everything was working properly. I tried cloning your form, but appears that you've edited the dropdown fields and removed it from your form. This issue happens due to several reasons, but this is usually browser specific:

1. Browser cache and Extensions: Cached data can sometimes interfere with how elements are rendered. Clearing the browser's cache and cookies can resolve this.

Browser extensions, particularly those that modify CSS, block scripts, or enhance UI, might interfere with dropdown functionality. Disabling extensions one by one or testing in incognito mode which typically runs without extensions can help identify the culprit.

2. Browser Settings and Features: In some cases, issues with graphics drivers or hardware acceleration can affect rendering. Disabling hardware acceleration in browser settings might alleviate the problem.

If the browser is misinterpreting touch input or touch-related settings are enabled, it might affect how dropdowns are displayed. Disabling "Enable touch events" or "Touch Events API" in browser flags e.g., chrome://flags in Chrome can be a solution.

Try logging out from your account, clear your browser caches and disable browser extensions, and then log back in. If the issue persists, circle back on this thread.

Reach out again if you have any other questions.

hi Mark,

thanks for your support in this,

i have tried your advices but the case still not working with dropdown/Multi selections ,

kindly check my for.

Hi Ayman,

When the Multiple Selections option is enabled for a Dropdown field, the options will appear in a scrollable list instead of a traditional dropdown. This is expected behavior. If you prefer to display a dropdown while allowing multiple selections, I recommend using the Multiple Selection widget instead. It supports multiple selections and maintains the dropdown appearance. Let me show you how to add it to your form:

1. In Form Builder, click on the Add Element menu on the left-hand side of the page.
2. Next, switch to the Widgets tab in the panel that appears.
3. In the search bar, type Multiple Selection to quickly find the widget.
4. Once you see it, drag and drop the Multiple Selection widget onto your form wherever you’d like it to appear.

Check out the screencast below to see my results:

Give it a try and let us know if you need any other help.

thanks Aravir, you suggestion worked.

however, the basic dropdown menu when i select multiple choices option and it appeared in a scrollable list, i couldn't select multiple choices in the scrollable list.

for your info. if it need to be fixed.

thanks again

Hi Ayman,

I cloned your form and I can successfully select choices from the basic dropdown menu, where multiple choice is enabled. Check out my result:

I think the issue here is how the selection is done. When selecting option from the basic dropdown's scrollable list, make sure you ctrl+right click on the option, to effectively select multiple items.

Give it a try and let us know if you need any more help.