0

Have a multi-select dropdown - which on expand is overlaying the CTA buttons on the form. I have to click elsewhere for the dropdown to close, (since it a multi-select dropdown the general behavior of close panel when an option is selected will not apply) and then click on CTA. I can't change the position of CTA also. Recommendations, please

image attached.enter image description here

1
  • Can you please attach a screenshot of your complete page ?
    – Ay_An
    Apr 15 '20 at 16:21
1

I have the following feedback for you:

  1. You can drop it up instead of down if you have fewer options and enough space above your inputs.
  2. You should not use a checkbox inside the select option like that instead, you can show the currently selected options by the user with an 'x' button on them. enter image description here

  3. Since I don't know the whole case and user interface that you have made I would recommend that if you can make sure that on clicking in the background ( when select is not in focus ), the menu is getting closed.

Thank you, Let me know if you think this answer could be made better.

1

Since you want the CTA buttons not moved, best way to imagine as an alternative solution is to reverse the arrow on the right-corner of the dropdowns in my point of view.

enter image description here

While you may have them pointing out downwards as usual when they're closed, you may have the arrows pointing upwards when the multi select dropdown's options revealed as above. By allowing user to click that arrow, it lets the dropdown collapse so that, your users freely complete the desired action within your forms via CTA buttons.

You should also think about applying animations during these transitioning (opening/collapsing) cycles.

0

Sidenote: In addition to the response of @user88702,

Checkboxes are necessary at a point when you search for something and want to select multiple things in one go! This should be checked against the user behavior pattern in your product

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.