scroll bars not displayed for large amounts of items

[brian-aisin]

I'm working on implementing this library to allow filtering of a large amount of items.

The EditForm that contains the BootstrapSelect component is approximately 1000 pixels in height. When the data source is populated and the BootstrapSelect component is clicked, the list of items is 3000+ pixels in height.

So far I haven't found a way to add a scroll bar once the height of the list of items exceeds a reasonable height.

An actual HTML select element's dropdown will add a scroll bar when the number of items exceeds an amount specified by each browser. Because BootstrapSelect uses an unordered list element (ul), this rule doesn't apply.

I checked a prior version of the form that wasn't written in Blazor that uses the bootstrap-select JavaScript client library. It also uses an unordered list to contain the items, but the div that contains the unordered list has a value assigned to max-height. This allows a scroll bar to appear of the height of the list of items exceeds the value assigned to max-height.

[Rob-Newman]

Hi

Adding the following CSS within your application should achieve this. If you only want it to apply to certain drop downs, you can use a custom class and target that instead.

div.dropdown-menu {
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
}

Does this resolve the issue, or was it more nuanced than that - in terms of only showing a scroll bar when required?

[bfutrell70]

This fixed the problem - thanks!

[brian-aisin]

Well, it did work...

If I add the following style block in the razor file, it works properly:

<style>
    div.dropdown-menu {
        max-height: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
</style>

If that same CSS ruleset is in the razor's CSS file, it doesn't work.

The CSS selector div.dropdown-menu only affects the div element surrounding the unordered list element. The CSS selector div .dropdown-menu applies a scrollbar to the div and the unordered list elements, resulting in two scroll bars.