How to limit the selections on the Visual Multi Select widget.

Hello,

I can not find the answer to this question please. How can I limit the number of selections on the Visual Multi Select widget? I am trying to set the minimum/maximum number of selections. I had a code to do this, which I pasted the code in the Custom CSS, but now it is not working.

Thanks.

It's possible to control limit the selections in Visual Multi Select widget however only with custom CSS code. 

You can check the form: https://www.jotformpro.com/52743016230949 designed by my colleague for a test purpose.

If you already have a code and have issues making it work. Can you share the form link, please? We'll take a look into it.

Hello,
How can I use the code to paste it in my CSS to limit the number of
selections?
The other code I have came from the forum, but it seems like it has been
disabled.
...

You can clone the form to obtain the CSS code from the Widget. I have also copied it below - 

.ms-elem-selectable.ms-selected ~

.ms-elem-selectable.ms-selected ~

.ms-elem-selectable.ms-selected {

display: list-item !important;

visibility: hidden;

}

.ms-elem-selectable.ms-selected ~

.ms-elem-selectable.ms-selected ~

.ms-elem-selectable.ms-selected:after {

visibility: visible;

content: "";

background: #fff;

display: block;

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

opacity: .7;

}

In the form builder, Click on the Widget and go to Widget Settings

Select the Custom CSS tab and inject the CSS code. 

As you notice, the selection in the widget is disabled after 3 selections, hence the code line .ms-elem-selectable.ms-selected is copied 3 times. 

Related Guide: How-to-Inject-CSS-Codes-to-Widgets & How-to-clone-an-existing-form-from-your-account 

Feel free to clone the form and let us know if you need further assistance.

The code is working for my one page order form when I preview the form.
Thanks so much!
...

I am glad that it works for you. Do not hesitate to get in touch if you have further questions.

Hello again.

The CSS code is working fine...but when I work from different computers or programs such as Mac, Windows 2016, etc, some programs do not allow the CSS code to limit selections.

I did a form preview on a computer with Windows 2016 and it allowed me to select way more items that it should have. For example, I just want 3 ingredients per pack, and the form allowed me to select close to 7 ingredients before I stopped. Please help.

Please advise in which Browser (like Chrome, Safari, Firefox, Internet explorer) and in which operating system you tested your form (Windows 7, Vista, 10 or Max OSX).

I tested on Mac on Safari and Chrome, as well as on Windows 10 on Edge, but I wasn't able to replicate this issue.

We'll wait for your response.

Thank you!

The browser is Internet Explorer, Windows 10, version 1709.

I was able to replicate the issue on Internet Explorer on Windows 10.

But I'm not sure how that can be resolved since it might be the CSS that is no longer supported by IE, it works in all other browsers.

I will check more, but I'm not sure if it can be resolved.