CODEWITHSUNDEEP
htmlcssbootstrap-4bootstrap-selectbootstrap-selectpicker
muhammad Aqib Rasheed
muhammad Aqib Rasheed

Reputation: 46

Bootstrap Select large list scrolls the page down (I can't use max-height / Scrollbars)

I am using bootstrap select plugin to generate custom dropdowns in one of my projects but I am stuck in a very critical issue. The dropdown list is big and when dropdown is opened the screen moves/scrolls toward bottom a bit so that first few options can't be seen.

Issue can be seen here in this video: https://drive.google.com/file/d/1SWQVvfOgO0-iLy0KjIf3sPEANKu8Nkpv/view

And if you want to play around please check here the color filter: https://www.stylorita.com/new1/outfit-ideas.php

Issue screenshot

Important: I can not use the max-height or add a scrollbar to it for fixing, I must display it without scrollbar. Please anyone can help?

Upvotes: 0

Views: 563

Answers (1)

Floyd
Floyd

Reputation: 154

If I understand you correctly, the solution is for whatever reasons NOT a scrollbar, but you want the first entries of your dropdown list to stay in view, right?

Maybe JS scrollIntoView() may help: If you have the chance to apply a class to your first list entry, you could use scrollIntoView when the list opens (which is normally the case at getting the focus or on click).

You can find a short description of scrollIntoView on this page: https://www.w3schools.com/jsref/met_element_scrollintoview.asp

Upvotes: 0

Related Questions