Topic: customizing multiselect
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:
- how to disable the "Select All" option
- 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
- "Select All" is enabled by default with no obvious way to disable it
- the menu of options occupies a few pixels (~5 options), not really convenient in case there are many (many) options to select from
?
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
thanks. could you please advise a little bit more ?
for example, in case of snippet
who it would like ? preferably without jQuery
I created the snippet with example. Check out this link: https://mdbootstrap.com/snippets/jquery/mateusz-lubianka/1516446?action=forum_snippet
Best,
nskalis commented 5 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 ?
Hi,
Check this code: $('.mdb-select').materialSelect({ visibleOptions: 15 });
Best,
nskalis commented 5 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 commented 5 years ago
solved.. $(document).ready(function() {
$('.mdb-select').materialSelect({ visibleOptions: 15 });
$('.select-toggle-all').css("display", "none");
});
Mateusz Łubianka staff commented 5 years ago
Great. I'm glad everything works.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.10.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes