Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Position: Take margin into account when performing collisions. Fixes #5766 - position: collision should take margin into account #3

Closed
wants to merge 1 commit into from

2 participants

@bhollis

This is a fix for http://dev.jqueryui.com/ticket/5766, making the collision functions for jquery.ui.position take into account the margin on the element being positioned. This will be really helpful if somebody wants to keep a "buffer" around a positioned element, or make sure the element's drop shadow (using -moz-box-shadow) doesn't go off the page and cause scrollbars.

@bhollis bhollis Position: Take margin into account when performing collisions. Fixes …
…#5766 - position: collision should take margin into account
63e40ca
@scottgonzalez

Thanks. I tweaked the commit a bit for performance and landed it in 4b9d5d1

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 13, 2010
  1. @bhollis

    Position: Take margin into account when performing collisions. Fixes …

    bhollis authored bhollis committed
    …#5766 - position: collision should take margin into account
This page is out of date. Refresh to see the latest.
Showing with 83 additions and 9 deletions.
  1. +58 −0 tests/unit/position/position_core.js
  2. +25 −9 ui/jquery.ui.position.js
View
58 tests/unit/position/position_core.js
@@ -332,6 +332,64 @@ test("collision: none, with offset", function() {
}, { top: -13, left: -12 }, "left top, negative offset");
});
+test("collision: fit, with margin", function() {
+ $("#elx").css("margin", 10);
+
+ collisionTest({
+ collision: "fit"
+ }, { top: $(window).height() - 20, left: $(window).width() - 20 }, "right bottom");
+
+ collisionTest2({
+ collision: "fit"
+ }, { top: 10, left: 10 }, "left top");
+
+ $("#elx").css({
+ "margin-left": 5,
+ "margin-top": 5
+ });
+
+ collisionTest({
+ collision: "fit"
+ }, { top: $(window).height() - 20, left: $(window).width() - 20 }, "right bottom");
+
+ collisionTest2({
+ collision: "fit"
+ }, { top: 5, left: 5 }, "left top");
+
+ $("#elx").css({
+ "margin-right": 15,
+ "margin-bottom": 15
+ });
+
+ collisionTest({
+ collision: "fit"
+ }, { top: $(window).height() - 25, left: $(window).width() - 25 }, "right bottom");
+
+ collisionTest2({
+ collision: "fit"
+ }, { top: 5, left: 5 }, "left top");
+
+ $("#elx").css("margin", "");
+});
+
+test("collision: flip, with margin", function() {
+ $("#elx").css("margin", 10);
+
+ // Flipping on window will leave the positioned element positioned outside its margins
+
+ collisionTest({
+ collision: "flip",
+ at: "left top"
+ }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "left top");
+
+ collisionTest2({
+ collision: "flip",
+ at: "right bottom"
+ }, { top: 0, left: 0 }, "right bottom");
+
+ $("#elx").css("margin", "");
+});
+
//test('bug #5280: consistent results (avoid fractional values)', function() {
// var wrapper = $('#bug-5280'),
// elem = wrapper.children(),
View
34 ui/jquery.ui.position.js
@@ -99,7 +99,10 @@ $.fn.position = function( options ) {
var elem = $( this ),
elemWidth = elem.outerWidth(),
elemHeight = elem.outerHeight(),
- position = $.extend( {}, basePosition );
+ collisionWidth = elem.outerWidth(true),
+ collisionHeight = elem.outerHeight(true),
+ position = $.extend( {}, basePosition ),
+ collisionPosition;
if ( options.my[0] === "right" ) {
position.left -= elemWidth;
@@ -117,6 +120,16 @@ $.fn.position = function( options ) {
position.left = parseInt( position.left );
position.top = parseInt( position.top );
+ collisionPosition = $.extend( {}, position );
+ var marginLeft = elem.css("margin-left");
+ if (marginLeft && marginLeft !== "auto") {
+ collisionPosition.left -= parseInt(marginLeft);
+ }
+ var marginTop = elem.css("margin-top");
+ if (marginTop && marginTop !== "auto") {
+ collisionPosition.top -= parseInt(marginTop);
+ }
+
$.each( [ "left", "top" ], function( i, dir ) {
if ( $.ui.position[ collision[i] ] ) {
$.ui.position[ collision[i] ][ dir ]( position, {
@@ -124,6 +137,9 @@ $.fn.position = function( options ) {
targetHeight: targetHeight,
elemWidth: elemWidth,
elemHeight: elemHeight,
+ collisionPosition: collisionPosition,
+ collisionWidth: collisionWidth,
+ collisionHeight: collisionHeight,
offset: offset,
my: options.my,
at: options.at
@@ -142,13 +158,13 @@ $.ui.position = {
fit: {
left: function( position, data ) {
var win = $( window ),
- over = position.left + data.elemWidth - win.width() - win.scrollLeft();
- position.left = over > 0 ? position.left - over : Math.max( 0, position.left );
+ over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft();
+ position.left = over > 0 ? position.left - over : Math.max( position.left - data.collisionPosition.left, position.left );
},
top: function( position, data ) {
var win = $( window ),
- over = position.top + data.elemHeight - win.height() - win.scrollTop();
- position.top = over > 0 ? position.top - over : Math.max( 0, position.top );
+ over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop();
+ position.top = over > 0 ? position.top - over : Math.max( position.top - data.collisionPosition.top, position.top );
}
},
@@ -158,7 +174,7 @@ $.ui.position = {
return;
}
var win = $( window ),
- over = position.left + data.elemWidth - win.width() - win.scrollLeft(),
+ over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(),
myOffset = data.my[ 0 ] === "left" ?
-data.elemWidth :
data.my[ 0 ] === "right" ?
@@ -168,7 +184,7 @@ $.ui.position = {
data.targetWidth :
-data.targetWidth,
offset = -2 * data.offset[ 0 ];
- position.left += position.left < 0 ?
+ position.left += data.collisionPosition.left < 0 ?
myOffset + atOffset + offset :
over > 0 ?
myOffset + atOffset + offset :
@@ -179,7 +195,7 @@ $.ui.position = {
return;
}
var win = $( window ),
- over = position.top + data.elemHeight - win.height() - win.scrollTop(),
+ over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(),
myOffset = data.my[ 1 ] === "top" ?
-data.elemHeight :
data.my[ 1 ] === "bottom" ?
@@ -189,7 +205,7 @@ $.ui.position = {
data.targetHeight :
-data.targetHeight,
offset = -2 * data.offset[ 1 ];
- position.top += position.top < 0 ?
+ position.top += data.collisionPosition.top < 0 ?
myOffset + atOffset + offset :
over > 0 ?
myOffset + atOffset + offset :
Something went wrong with that request. Please try again.