search

snapappointments / bootstrap-select

:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
https://developer.snapappointments.com/bootstrap-select/
MIT License
9.84k stars 2.72k forks source link

1.14.0-beta3 -Dropdown blanks out when we scroll to the end or we re-open it #2872

Open rajgodvani725 opened 1 month ago

rajgodvani725 commented 1 month ago

When we select the dropdown and scroll to the end, it causing the dropdown to totally blank out , same happend when we open the dropdown evenly . CHECK IMAGE - 1

image

to fix this i made following changes and it worked fine.

Screenshot 2024-05-17 132204

RafaelG18 commented 1 month ago

Hello! I have the same problem. I'll apreciate it if you can say to me where i need to apply this change? Cause i can see that you do not get any answer here

rajgodvani725 commented 1 month ago

Hello! I have the same problem. I'll apreciate it if you can say to me where i need to apply this change? Cause i can see that you do not get any answer here

Hey, just download both css and js files. Then open the js file in any IDE (i use vscode). Use prettier to format the file. Then see the line number in 2nd image i have attached. Use those files in your code instead of CDNs.

If still doesn't work let me know i’ll share the files

RafaelG18 commented 1 month ago

Yo! Thanks for the info! I tried your solution but I noticed that even so, if the dropdown has a lot of information, it is not displayed completely. After a few hours debugging with the original file downloaded from the NPM packages, i figured out that is a scrolling problem, so, if you check the configuration options, an option named virtualScroll, it have 600 as default value, you can try setting the value of this option as twice the size of the list that you render in the dropdown and it could work for you, since this worked for me.

rajgodvani725 commented 1 month ago

Yo! Thanks for the info! I tried your solution but I noticed that even so, if the dropdown has a lot of information, it is not displayed completely. After a few hours debugging with the original file downloaded from the NPM packages, i figured out that is a scrolling problem, so, if you check the configuration options, an option named virtualScroll, it have 600 as default value, you can try setting the value of this option as twice the size of the list that you render in the dropdown and it could work for you, since this worked for me.

Hey man!! Happy to hear that your UI is fixed. I would like to suggest that there’s procedure called lazy loading which you can implement to plot the less amount of data into selection and when you scroll down it will add more and remove the existing ones. It works in both ways (scroll up and scroll down) And about the virtualScroll, my list is dynamic and it could have n numbers or dropdown items. So i used lazy loading there.