Topic: Select component size
Expected behavior I am providing the user with lists of options to choose based on a database query.
I expect that setting the size of a select component will cause multiple options to be shown, as it does in normal HTML behavior.
Actual behavior The size seems to be ignored, unlike normal HTML
Based on the API documentation I tried setting size to 'lg', and tried setting optionHeight and visibleOptions but those also had no effect (see https://mdbootstrap.com/snippets/standard/cscheriff/3259871)
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/cscheriff/3259847#html-tab-view
<select class="select" size=10 multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
Thanks @Michał Duszak, but this still isn't quite what I was looking for (also, your link doesn't work for me). I want multiple options to be shown without the user having to click on the drop-down. I can't attach an image for some reason (when I try I get a message Upload has failed!), but if you try the HTML I provided without MDB then you'll see what I mean.
Michał Duszak staff commented 2 years ago
You mean that you want options to be pre-selected without user's actions, or you want the dropdown to be always shown no matter what user does on the page?
Michał Duszak staff commented 2 years ago
Maybe you meant you want all the options to be visible in the dropdown without user having to scroll down
https://mdbootstrap.com/snippets/standard/m-duszak/3262876#html-tab-view
Colin S free commented 2 years ago
That is what I meant, I want multiple options visible without the user having to scroll down. How do I do that? The snippet you provided does not. Here's a codepen of approximately what I'm expecting to see: https://codepen.io/cscheriff/pen/LYywXEg
Michał Duszak staff commented 2 years ago
Alright, you mean you want the select to be always open. We don't provide such an option. Dropdown is generated dynamically all the time you open up a select. I will add this to our idea list. There's a JS workaround - you can prevent events after close. See if it works for you in the snippet. https://mdbootstrap.com/snippets/standard/m-duszak/3267555#html-tab-view
Try adding data-mdb prefix to your attributes.
<select class="select" data-mdb-size="lg" data-mdb-option-height="70" data-mdb-visible-options="10" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
See the snippet below:
https://mdbootstrap.com/snippets/standard/m-duszak/3260834
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.8.1
- Device: PC
- Browser: Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes