Divran
commented
2 years ago I believe this may be caused by individual rows having different heights to each other. I haven't tested this to confirm though. Also, I will most likely be dropping the bootstrap select component for this particular use case, both because of this issue but also because I need two search boxes in that specific place (to search for different columns of data separately rather than both at once). Here is a link to the current commit that has this issue so you can download a copy of the repo at that commit to test with if needed https://github.com/Divran/greginator/tree/600170ae5a1534d3d422cd85ce97bd721c49c4ec
edit: I have now stopped using this component for this particular use-case. I no longer need help with this issue.
If you do end up looking into this issue anyway, since it will surely help other people, please use the link above to jump to an old commit where the issue is still visible, then download the repo zip, and throw it in a local webserver of some kind to test it (I use xampp). Before this most recent update you could even run the thing off the desktop just by double clicking the html file, but that's no longer the case due to modern browsers not allowing you to download json files due to cross origin errors if you run it from your desktop, unfortunately.
Hi. I've been using bootstrap select for a while now for one of my projects, but today I needed to load a large amount of data. So I went searching for a solution to prevent the massive lag that happened when I tried to create several hundred options with custom html content inside the bootstrap select. Eventually I discovered that in a new version of bootstrap select (or at least newer than I had), you had added the ability for it to only load the content that should be visible on screen. Updating immediately fixed my lag issues. However, I discovered a new issue. When you open the dropdown and start scrolling, the scroll position sometimes jumps randomly and skips a large section. For now, I've added a small disclaimer to my site that tells the user to narrow down the results with a search query, but it would be great if the issue could be fixed somehow.
I also noticed a minor issue where if you scroll all the way down to the bottom, there is a very large blank space for some reason.
My website is available here https://divran.github.io/greginator/. All the source code is available here https://github.com/Divran/greginator.
To reproduce the issue, open the "GTNH" tab, then open the "Recipe Conflict Checker" collapsible, then select any machine in the first dropdown (or at least almost any - I think a few of them have no data, so the second dropdown will be empty. it needs to have a decent amount of data - such as chemical reactor, or assembler), and lastly open the second dropdown, which will reproduce the issue.
I am overriding the css of some of bootstrap select's elements, so it may be caused by that. To be exact, these two things: https://github.com/Divran/greginator/blob/master/css/greginator.css#L141-L146 If it is caused by this, it would still be great if it could be fixed on your end, since I needed to make those css changes to get the look I was after. If there is anything I can change regarding the css to fix it while keeping the same look, please let me know.