Large white space appears after scrolling to bottom of large list

[Schw2iizer]

I've noticed when I have a list of 600-700+ items, when scrolling to the bottom, the dropdown turns white and there is nothing there. If I scroll a little bit back up, the list re-appears. This is making it very difficult to select the last item in the list. It does not happen when the list is smaller than 600. Has anybody experienced this?

[Schw2iizer]

Example

[noir04]

The same thing is happening for me, but only in Firefox
Chrome/Edge shows what I expect to happen

I've created a JSFiddle which illustrates the problem
https://jsfiddle.net/2yLrhpd9/ (it's a little heavy, ~5000 options)

Also a horizontal scrollbar appears in Firefox, could be related, could be unrelated, regardless, that shouldn't happen, right?

Environment:
Firefox: 81
Windows 10
Bootstrap 3.3.7 (but the problem is also present in bootstrap 4)
jQuery 3.4.1 (but the problem is also present in the latest version)
Bootstrap select 1.13.18

[Schw2iizer]

@noir04 Sorry, just now saw your comment. Yeah, that's definitely a bug. Doesn't look like they plan on working on it.

[fox91]

I can confirm the bug is limited to Firefox and only with virtualScroll enabled (default: 600).
I'm able to bypass the problem disabling virtualScroll but with large list there may be performance issues.

[caseyjhol]

@Schw2iizer @wowton Can either of you provide me with an example of this issue in Chrome?

[Schw2iizer]

@caseyjhol Yes, what would you like from me?

[caseyjhol]

Please create a reduced test case (you can use our preconfigured Plunker), and report back with:

• your link
• Bootstrap version
• bootstrap-select version
• specific browser and OS details.

Thanks!

[bjgaynor]

@caseyjhol This is happening to me as well. Thought this might be useful in your troubleshooting.

• Sorry, I don't have a link for you at the moment
• Bootstrap: "version": "4.6.0"
• Bootstrap-Select: "version": "1.13.18"
• Rails 6.0.3.4
• Mac OS 11.2.1 (Big Sur)
• Google Chrome Version 89.0.4389.90 (Official Build) (x86_64)

[caseyjhol]

Providing me with a demo of the problem would be the most helpful. @noir04's issue is specific to large lists with options with lots of text (making the menu wider than the window) and only in Firefox. I'm working on fixing that, but if I'm not able to recreate an issue, it's not possible for me to fix it (how could I be sure I fixed it?)

[caseyjhol]

I just committed a possible fix, but I was never able to recreate this issue in Chrome, so 🤷‍♂️ .

[gabrielcaixeta]

Hi, same problem here.
browsers: Firefox, Edge and Chrome
bootstrap-select: 1.13.18
boostrap: 4.4.1

In a small set of data works fine! But a large set not!
I tested on set of 5.568 records and i don't get to see the last options.

Show the gif.

A large range of white space is generate, but if i search for the last element I can select its. But i dot not get to see when i use the scrolling.

[w805756054]

Disable 'virtualScroll' can fix thia issue. (the default value is 600)
$('.select').selectpicker({ virtualScroll: false });

---

Hi @caseyjhol , I created a test case, hope it can help you to fix the issue.
https://jsfiddle.net/06pvah1b/

It seems that the problem only occurs in firefox and edge on windows, I have tested firefox chrome safari on MacBook pro and there is no problem.
Version of firefox on windows: 98.0.1
Version of edge on windows: 99.0.1150.46

[anatoliyfominov]

Hey! I have the same problem.

Kubuntu 20.04
FF 90.0 (x64) and Vivaldi 5.1.2567.73

bootstrap-select: 1.13.18
boostrap: 4.6.0

[amitshahc]

Disable 'virtualScroll' can fix thia issue. (the default value is 600)
$('.select').selectpicker({ virtualScroll: false });

This fix solved my issue. thanks.

[pablo-lp]

Thanks, I use this workarround

const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
$('.select').selectpicker({ virtualScroll: (isFirefox)? false:600 });

[tonton81]

for me when this happens (a list of 1000-2000 entries), i added an attribute to the selector called data-size via javascript then ran selectpicker refresh, and that fixed it