Topic: Targeting specific instance of select element
Hi,
I have two instances of select elements. One to show department, one to show locations. I want department options to have a scrollbar as fewer than 20 departments exist. For locations, as there can be thousands, I want to restrict the view to the top 10 locations, but leave the rest of the options hidden, but searchable. I can accomplish requirements for location select by modifying css class .select-options-wrapper { overflow-y: hidden !important;} along with setting visibleOptions.
My question is - how can I apply this style change to only location select box.
I think you should use visibleOptions in select's config instead of manually changing css.
live example: https://mdbootstrap.com/snippets/standard/mlazaru/5018437#js-tab-view
all options are available here: https://mdbootstrap.com/docs/standard/forms/select/#docsTabsAPI
Thanks, but visibleOptions does not keep options hidden. Here are my requirements. 1. Total number of options ~ can be hundreds. 2. I want to show 8-10 of top options visible, other options should not be visible. 3. I use filter=true. So when user types in the search box, rest of the options are useful.
I can accomplish most of this using standard API. Problem is if I set hidden=true on an option, then it is not used in search either. Is there a setting where hidden options can be included in search and their visibility turned on if they are being searched?
mlazaru staff commented 2 years ago
let's continue discussion there: https://mdbootstrap.com/support/standard/including-hidden-options-in-search-results-on-a-select/
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: Laptop
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No