This fixes#2769, where Select2 will jump around because of how
focus moves to the original element when selections are made.
Because absolute positioning pushed the original element out of the
viewport, bringing it back into the viewport should be the best
fix.
Case: the dropdown should be shouwn above input. PositionDropdown function then operates by showing dropdown below (and ".select2-search input" has no margin, it gets the wrong dropdown size). Then in the same function calculates the top value, but doesnt take into account, that input will have the "margin-top: 4px". Thus dropdown is displayed 4px lower.
Then the window resizes, the dropdown position is already correct, but then calculations (outerHeight()) get the height including the ".select2-search input" margin of 4px and thus moves the dropdown up.
Added padding to ".select2-search" container instead of margin for ".select2-search input". This fixes bug of "#select2" movement when resizing page.
Steps to reproduce the bug:
- open select2 so it appears above the input
- resize the window
Actual results:
- #select2-drop moves up by 4px
Expected results:
- #select2-drop stays in same place
The “top” on the other styles (-moz-linear-gradient,
-webkit-linear-gradient, etc) signifies “start at the top”. The
equivalent basic “linear-gradient” style is “to bottom”, not “to top”.
Greatly simplifies complexity of expressions and reduces (hopefully) rendering time.
From https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors
Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element.
The gradients that were fixed in #2002 had the wrong target value.
Most of them were targetting the bottom, though not all of them,
and the code set them to target the top.
the first argument to linear-gradient is required to either be an angle, or expressed as "to [side]". Omitting the "to" keyword causes gradients to not render in IE10.
- collision detection was not moving the drop left based on the
difference between viewport and relative location of box (dropleft +
dropwidth)
- .select2-drop-active was overriding the .select2-drop-auto-width
making the shifted dropbox look a bit wierd
-ms-box-sizing does not exist, Konqueror does not need prefix.
-ms-text-overflow does not exist, Opera does not need prefix.
-moz-border-radius and -webkit-border-radius not needed anymore.
-moz-background-clip and -webkit-background-clip not needed anymore.
-moz-box-shadow not needed anymore (-webkit still used for Android 2.3)
