Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[mobile] dropupAuto position & resize not working when scrolling parent #2501

Closed
straycoders opened this issue Jul 16, 2020 · 0 comments
Closed

Comments

@straycoders
Copy link

straycoders commented Jul 16, 2020

while searching a solution for my problem, i found that you had mentioned as in posts #1422, #373 :

$('.my-container').scroll(function() { $(window).trigger('scroll'); });

this solved my problem for desktop browsers (thanks!), but no effect for mobile browsers (mainly chrome,firefox). any solution for this, please?

UPDATE:

finally my problem solved. below is the details:

bootstrap 3.3.7
jquery 2.2.4
bootstrap-select 1.12.4
ubuntu 18.04, windows
chrome, firefox

this only happens with mobile device

issue background:
In mobile device, I was not able to scroll up/down the parent div (.my-container) when the dropdown-menu is shown. While when not shown, scroll and touchmove events are processed by your code snippet as expected. In normal situation, when we scroll up/down the parent-container while the dropdown-menu is shown, the dropdown-menu will nicely re-adjust its size and position.

Terribly sorry for not being clear enough from the beginning. I might be confusing anyone.

workaround:
Beside referring to discussion in #1558, I discovered with the help of developer tools that it was due to the presence of <div class=".dropdown-backdrop"></div> which is belong to bootstrap 3.3.7, seems to be blocking mainly those two events to arrive at your code snippet. I've checked that no problem with bootstrap 4.*. It looks like this problem only for bootstrap 3.3.7 (or below? just guessing).

So, simply by applying this CSS:

.bootstrap-select .dropdown-backdrop { pointer-events:none; }

and this jQuery script:

$('.my-container').on('scroll', function() { 
   $('body').trigger('scroll');				
});

solve the problem. Now, your beautiful plugin regains its beauty.

That's all, big thanks to you for this beautiful one. Been using since version 1.6.3.

I'm closing this issue.

@straycoders straycoders changed the title data-container != body, dropupAuto positioning and resize problem [mobile] dropupAuto position & resize not working when scrolling parent Jul 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant