Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Many display problems with Select2 4.0.1 #3970
Since version 4.0.1 (no problem with version 4.0.1-rc1), even the simplest examples are not displayed correctly on all browsers (latest Chrome / Firefox / Safari at least): the dropdown is not displayed under the selector.
Here is an example: https://jsfiddle.net/michaelperrin/zxu8pxn3/1/ (clicking on the selector shows the dropdown, but it is displayed too much on the left).
I had a possibly similar issue in which the dropdown portion appeared slightly lower and to the right of where it should have been. Do you think this is related? If so, what additional information, if any, would be helpful?
For the time being I just papered it over by tweaking the positioning in my custom CSS overrides, but obviously I'd prefer a better solution.
For anyone running into this issue, it would be useful to have the output for the following two statements (executed in your browser console, F12 usually):
On the documentation website, I get the following output
Which explains why the dropdown is lining up fine there. This will allow me to confirm that the issue is actually with the offset caused by margins on the body (or the dropdown parent).
Same problem here...
And yes, it's positioned 65px too high, "left" position is correct. The control looks correct if I remove the page margin - but then the page looks broken.
If I wrap it like this:
The problem still appears - even if the page itself does not have a margin.
This works, though:
This is probably a separate, unrelated issue. If you can create a jsbin/jsfiddle that reproduces the issue and a new ticket describing the issue, we can handle the bug.