position plugin does not consider margins

[aNt1X]

Hi,

the getDimensions() function uses outerHeight() and outerWidth() to compute target element's dimensions, but it does not consider margins.

I think that the following code

	return {
		width: elem.outerWidth(),
		height: elem.outerHeight(),
		offset: elem.offset()
	};

should be

	return {
		width: elem.outerWidth(true),
		height: elem.outerHeight(true),
		offset: elem.offset()
	};

Best regards

[Scott González]

Why do you think that? We look at the margin of the element being positioned. Please provide a reduced test case showing the unexpected behavior and describe what you expect the behavior to be.

[aNt1X]

Sorry man, you are right, i have the bad habit to not provide examples.

Here it is a small fiddle: ​http://jsfiddle.net/aNt1X/c7qmS/

<div id="yellow" style="position: absolute; height: 50px; width:50px; background-color: yellow; margin: 5px"></div>
<div id="red" style="position: absolute; height: 50px; width:50px; background-color: red; margin: 5px"></div>

$(function () {
    
$('#yellow').position({ my: 'left top', at: 'right top', of: $('#red') });
    
});

The yellow box 'left top' corner is positioned at the 'right top' corner of the red box, but it does not respect margins.

I think that if the red box has a margin, the positioning plugin should respect it.

If you provide includeMargin=true to the .outerWidth() and .outerHeight() functions, it will.

[aNt1X]

I updated the fiddle with a green box and without absolute positioning just to be more clear.

​http://jsfiddle.net/aNt1X/c7qmS/1

[Scott González]

Oh, right. We only look at the margin for collision detection. Margins are outside of the element, so we don't include the margin when positioning the element. If you want them to be separated by 5px, you should provide an offset. What you're asking for is to position the top left corner of the yellow box at the top right corner of the red box. That's exactly what's happening.