Topic: Material Select not scrolling to selected value in long dropdown list
Expected behavior When there are a large number of options in the dropdown and the items are in a scrollable list, it doesn't scroll to the selected item. I have a list of dates (about 30) it shows 17 of them (with a scroll bar), if I choose the oldest date, I have to scroll to the bottom of the dropdown to see that it is selected. I would expect it to scroll into view the selected item. Bootstrap-select has this behavior. Also, it appears the 'size' option is ignored in material select. I looked through the code and it is not using it.
Actual behavior
Resources (screenshots, code snippets etc.) I can't paste a screen shot.
Hi, I am here to help you.
How you define chosen item in the dropdown? When clicking on dropdown activator you get a chance to choose one of the items in its list. None of items are active on this list until you interact with it. After you do something to this item (hover, click etc.) it does not contain information that this item is active. You can set some items to style them as active, but it doesn't change their behaviour. It's just cosmetic. If you want to change the scroll position use some JS/jQ. Check offset of this item you chose to be active and set your dropdown list scroll to match this value to make this item visible on opening the list. However, if you want to have a scrollable long list of options that opens on click and save information about chosen option I recommend using our select field you mentioned before. To use font-awesome in the list simply add code of it's icon to the li tag inside of our drop down.
If you need additional help I am here for you.
Best Regards, Piotr
PS In the future you can create snippet to show exacly what is your problem with our component.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.9
- Device: mac
- Browser: chrome
- OS: unix
- Provided sample code: No
- Provided link: No
register@p3hp.org pro commented 5 years ago
Allow me to clarify. The items are scrollable in the list, but when the dropdown is selected to show the list, the currently chosen item is not automatically scrolled to (using something like scrollIntoView() ) in the dropdown list, so the user must manually scroll to the selected item to see it. Also how do you apply the font-awesome icon to items in the list, instead of using an image.