Topic: In Searchable Multiselct 'search box not visible without scroll

Gautam Chaudhary priority asked 4 years ago


If list of items in the multi-select is large enough to create a scroll bar in, <ul id="select-options-#####>, the search SPAN become invisible, because the <li> item's first li value shifts to the top.
It works fine for small list, but not with large number of select options.  How can i ensure that the search span is always visible. Currently i have scroll up to see the search option.
Screenshot at: https://screenshots.firefox.com/Z0CqB8bnLT7rf4Ik/127.0.0.1


usmanadnan001 pro commented 4 years ago

I have the same issue, also when you select an option from the long list the selected options auto scrolls to the top, which is annoying...

Mikołaj Smoleński staff answered 4 years ago


Please add scrollTop to mdb.js file after line number 14892. It should look like this:

}).animate({
  opacity: 1,
  scrollTop: 0
 }, {

Regards

 


Gautam Chaudhary priority commented 4 years ago

Thanks a lot... working perfectly now. added in line: .animate( {opacity: 1, scrollTop: 0}, {queue: false, duration: options.inDuration, easing: 'easeOutSine'});

usmanadnan001 pro commented 4 years ago

yep, that fixes the initial scroll to top, but what about scrolling to top when a selection is made?

Mikołaj Smoleński staff commented 4 years ago

To remove scrollTo option please comment line nr 19252: option.addClass('selected'); // options.scrollTo(option); } }; Regards

nebuso pro answered 4 years ago


The same issue. Just posting to subscribe.

Mikołaj Smoleński staff commented 4 years ago

Did You try to change the code?

nebuso pro commented 4 years ago

yes, scrollTop: 0 works. I subscribes to find in the future more quickly :-)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags