Opened 10 years ago

Closed 10 years ago

#9081 closed bug (notabug)

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:



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

Change History (4)

comment:1 Changed 10 years ago by Scott González

Owner: set to aNt1X
Status: newpending

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.

comment:2 Changed 10 years ago by aNt1X

Status: pendingnew

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

Here it is a small fiddle:

<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.

comment:3 Changed 10 years ago by aNt1X

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

comment:4 Changed 10 years ago by Scott González

Resolution: notabug
Status: newclosed

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.

Note: See TracTickets for help on using tickets.