Topic: Select component size

Colin S free asked 1 year ago


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>

Colin S free answered 1 year ago


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 1 year 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 1 year 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 1 year 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 1 year 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


Michał Duszak staff answered 1 year ago


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



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

  • User: 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