#9081 closed bug (notabug)

Opened February 12, 2013 12:19PM UTC

Closed February 12, 2013 02:06PM UTC

position plugin does not consider margins

Reported by: aNt1X Owned by: aNt1X
Priority: minor Milestone: none
Component: ui.position Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (4)

Changed February 12, 2013 12:53PM UTC by scottgonzalez comment:1

owner: → aNt1X
status: new → pending

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.

Changed February 12, 2013 01:39PM UTC by aNt1X comment:2

status: pending → new

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.

Changed February 12, 2013 01:46PM UTC by aNt1X comment:3

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

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

Changed February 12, 2013 02:06PM UTC by scottgonzalez comment:4

resolution: → notabug
status: new → closed

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.