Topic: Material Select not scrolling to selected value in long dropdown list

register@p3hp.org pro asked 4 years ago


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.


register@p3hp.org pro commented 4 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.


MDBootstrap staff answered 4 years ago


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.



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

  • 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