CODEWITHSUNDEEP
javascriptjqueryjquery-select2
StudioTime
StudioTime

Reputation: 23999

Select2 scrollIntoView before opening

I have an issue where using the select2 jQuery plug in on mobile devices is problematic, namely, when the dropdown is activated and it's low on the page, the virtual keyboard covers the select options.

To fix, I want to scroll the select2 element (actually it's label above) to the top of the page before it opens.

I'm trying to trigger this when the select2 is opening:

.on('select2:opening', () => {
    myLabel.scrollIntoView({ behavior: 'smooth' });
})

This fails due to race conditions, it doesn't move (but does if breakpoint on the scrollIntoView method)

I can prevent it opening, and then try to reopen as below, but of course this fails due to causing a stack overflow:

.on('select2:opening', e => {
    e.preventDefault();
    myLabel.scrollIntoView({ behavior: 'smooth' });
    mySelectElement.select2('open');
})

My question is, can this be achieved from the events in the select2 plug in?

Is there a way to delay opening until the element has moved to where I need it positioned?

Upvotes: 1

Views: 290

Answers (1)

mgarcia
mgarcia

Reputation: 6325

Since you are already using jQuery, I would suggest the use of the animate method:

.on('select2:opening', e => {
    $('html, body').animate({ scrollTop: $(myLabel).offset().top });
})

Upvotes: 1

Related Questions