Dropdown positioned too high when appended to absolute parent with scrollTop.

[epjoey]

See this plunker:
https://plnkr.co/edit/JN8THx7eEaOX76h7bELN?p=preview

Bug seen in FF, safari, chrome.

The issue is because an absolute (absolute or fixed) container's edge shifts upward when you scroll within it.

Select2 uses the offset from document edge to the bottom edge of the fake select to position the dropdown. For appending the dropdown to a positioned parent, the parent's own offset is subtracted. This is complete for most cases.

But if the fake select is in a container that overflows a fixed container (the dropdownParent), when you scroll the select up, its offset is reduced, but its top positioning relative to the edge of the dropdownParent is not, because the dropdownParent's edge is pushed up with it. The scrollTop of the dropdownParent needs to be added to the css positioning.

As you can see in the screenshot, Ive scrolled the static blue box up about 80px within the fixed red box. The dropdown top needs another 80px.

I added this near the end of _positionDropdown and it fixed the issue for me.

    var parentCssPosition = $offsetParent.css('position');
    if (parentCssPosition === 'fixed' || parentCssPosition === 'absolute') {
      css.top += $offsetParent.scrollTop();
      css.left += $offsetParent.scrollLeft();
    }

I can make a pull request if we think its the best approach.

[kevin-brown]

I'm pretty sure this was fixed in the upcoming 4.0.3 release, but it might be a different issue.

---

Can you expand upon the issue you are facing by adding a few more pieces of information to your bug report?

• What browser(s) and Operating System have you tested with?
• Does the bug happen consistently across all tested browsers?
• Can you reproduce this issue on the examples page?
• What version of jQuery are you using? And what version of Select2?
• Are you using Select2 with other plugins?

The contributing guide contains a useful section with a few questions which can help us track down the bug and speed up the process of finding a fix for it. The creation of an isolated test case would also be useful.

[ne0guille]

i can reproduce this in the examples page.

on the Loading remote data select2. select an option, then click again and the dropdown is positionated on top, if there is no place to display it below.
This is also happening in my application, can you check this out?
thanks

[ne0guille]

@kevin-brown this is also happening in the 4.0.3 version

[decodekult]

This is happening for me to on an application where i am using select 2. I also can reproduce it on the repo examples page as stated above.

Using Win 10, checked with Firefox 48, Chrome 53, Edge 38 and Opera 39. In all cases, a first open of the select2 search box places it a little offset to the top, and then after searching, selecting a result, and opening it again the search box is placd just where it would site if the old search results were shown. Closing and opening again clears the issue.

I will do some extra tests. Maybe selecting a value bypasses clearing some data somehow that a "natural" closing addresses.

[zakjan]

@kevin-brown Updated original test case to 4.0.3 shows the same error for me. Chrome 54. https://plnkr.co/edit/aSmiYLalXof5FpdkYrUW?p=preview

[lucianobosco]

Same issue when select2 is on Bootstrap Modal. Any updates about this? I can't figure out how to fix it.

[poulnike]

I have the same problem

[alexweissman]

Closing this as a duplicate of #4614.

[AnthonyVidal]

This is not solution when existing scroll in parent dropdown (if content of modal).

For example: Its a OK:

but lowering the scroll of the parent body is the problem:

and if the scroll body grows, worse:

Someone who has solved this problem? Thanks

[ChangDev123]

I found the same issues on my project..
I have solved it right away..
The issue was the dropdownparent not placing on the right place..
just point your dropdownparent to another id which contained your select..

[AnthonyVidal]

I found the same issues on my project..
I have solved it right away..
The issue was the dropdownparent not placing on the right place..
just point your dropdownparent to another id which contained your select..

@ChangDev123 please write the code example