Topic: customizing multiselect

Nikos Skalis free asked 4 years ago


Resources (screenshots, code snippets etc.)

Hi,

If we consider the example Multiselect with options groups in https://mdbootstrap.com/docs/jquery/forms/multiselect/

Expected behavior

Could you please advise:

  1. how to disable the "Select All" option
  2. how to expand the menu of options, instead of displaying ~5 rows/options to display as many options as the screen permits (when you click on that form field)

Actual behavior

  1. "Select All" is enabled by default with no obvious way to disable it
  2. the menu of options occupies a few pixels (~5 options), not really convenient in case there are many (many) options to select from

?


Mateusz Łubianka staff answered 4 years ago


Hi,

Check this code: $('.mdb-select').materialSelect({ visibleOptions: 15 });

Best,


nskalis free commented 4 years ago

I am sorry but I am not experienced with jQuery: $(document).ready(function() {<br> $('.mdb-select').materialSelect();<br> $('.select-toggle-all').css("display", "none");<br> $('.mdb-select').materialSelect({ visibleOptions: 15 });<br> }); makes the form placeholder appear twice, I guess mentioning it 2nd time $('.mdb-select').materialSelect breaks it somehow, how I can combine both settings ?


nskalis free commented 4 years ago

solved.. $(document).ready(function() { $('.mdb-select').materialSelect({ visibleOptions: 15 }); $('.select-toggle-all').css("display", "none"); });


Mateusz Łubianka staff commented 4 years ago

Great. I'm glad everything works.


Mateusz Łubianka staff answered 4 years ago


@nskalis

I created the snippet with example. Check out this link: https://mdbootstrap.com/snippets/jquery/mateusz-lubianka/1516446?action=forum_snippet

Best,


nskalis free commented 4 years ago

thank you! would you be so kind how to use visibleOptions described here https://mdbootstrap.com/docs/jquery/forms/select/#select-options-and-attributes and set it to 15 for example ?


nskalis free answered 4 years ago


thanks. could you please advise a little bit more ?

for example, in case of snippet

who it would like ? preferably without jQuery


Mateusz Łubianka staff answered 4 years ago


Hi,

The options for the Multiselect are the same as in the Single Select. You can find them here: https://mdbootstrap.com/docs/jquery/forms/select/#select-options-and-attributes That's all options at the moment, but we are still developing. If you don't want to use "Select All" option you can add display: none style. For example with jQuery: $('.select-toggle-all').css("display", "none");

Best



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.10.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: Yes
  • Provided link: Yes