Opened 14 years ago

Last modified 7 years ago

#4286 open bug

Resizable: Containment issue with offset grid dimensions

Reported by: Trigle Owned by:
Priority: major Milestone: 2.0.0
Component: ui.resizable Version: 1.7
Keywords: resizable, constrainment, absolute Cc:
Blocked by: Blocking:


I have an absolutely positioned constraining div and some resizable divs which are also absolutely positioned within the dimensions of constrainment.

The resizables are not children of the resizable div (although the behaviour occurs with both).

I am using a 20px x 20px grid and when I align one of my resizables to the right edge of the constraining div then resize the left handle left, the div jumps outside of the constraining div to the right hand side.

You will also notice if you put the resizable div on the left edge of the constraining div, using the right handle you cannot resize the element to the max width of the constraining div.

The below temporarily fixes my problem but causes further issues with constrainment, without further investigation I cannot produce a complete solution.

isOffsetRelative = /relative|absolute/.test(self.containerElement.css('position'));
if(isParent && isOffsetRelative) woset -= self.parentData.left;

// this fixes my inability to resize to full width, however destroys the constrainment
// luckily i have an event fired which pops it back into the constraining element
isOffsetAbsolute = /absolute/.test(self.containerElement.css('position'));
if(isOffsetAbsolute) woset = 0;

Attachments (1)

test-case.htm (118.6 KB) - added by Trigle 14 years ago.
Test Case

Download all attachments as: .zip

Change History (13)

Changed 14 years ago by Trigle

Attachment: test-case.htm added

Test Case

comment:1 Changed 14 years ago by Trigle

This issue was also present in 1.6rc5 and 1.6rc6.

comment:2 in reply to:  description Changed 14 years ago by raziel057

I can't reproduce the problem when the resizable is set as children of the constraining div. But endeed, when resizable is not in the constraining div, there a lot of problems.

comment:3 Changed 14 years ago by Trigle

Thanks raziel, will this ever make it out of TBD? It would be nice to see it fixed as it seems to produce the most cross browser compatible results with minimal CSS issues, compared to relative positioning.

comment:4 Changed 14 years ago by gantww

I think this is related to the issue I'm experiencing. I have draggable and resizable images being added to a div. The containment for the resizable and draggable is set to the div. Draggable works fine, but I can still drag close to the edge and resize out of the div.

I've been fighting this bug on and off (mostly on) for two weeks now and have had no luck getting it resolved. The interesting thing is that a simple sample app I created that does the same thing works flawlessly on both containments.

Does anyone have any thoughts?

comment:5 Changed 14 years ago by Trigle

Does the above fix to the jQuery UI resizable component not help you? It fixed all issues I was having and sure I don't expect interoperability, but quite simply, i dont need relative positioning at all!

comment:6 Changed 14 years ago by auction123

The same issue can be found on the actual jQuery example at the moment: You can vertically resize beyond the constrained div.

I'm sure if there were fixes they would be in the examples...

comment:7 Changed 14 years ago by Jörn Zaefferer

Milestone: TBD1.7.2

comment:8 Changed 14 years ago by Jörn Zaefferer


comment:9 Changed 14 years ago by Scott González

Priority: blockermajor

It looks like the problem is limited to resizing one grid size larger than the container. This doesn't seem like a common enough case to be marked as a blocker.

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


comment:11 Changed 11 years ago by tj.vantoll

Status: newopen
Summary: Constrainment issue with resizable and constraining element left offsetResizable: Containment issue with offset grid dimensions

Verified this is still an issue in 1.9.1 -

comment:12 Changed 7 years ago by Steve Shaffer

I'm not incredibly familiar with the inner-workings of jQuery UI, but after stepping through the code a bit, here's what I'm gathering:

The containment plugin gets the request to expand the div outside the containment (without taking grid into account) and says "here, let me adjust that and expand you right up to the EDGE of the containment."

Then the grid plugin runs, sees the request to expand up to the edge of the containment (but doesn't really take the containment into account) and rounds that expansion request off based on the grid, which could cause it to fall outside the containment area if a larger part of the grid would be inside the containment (due to the rounding).

So it seems to me the best way to fix this might be to:

Change to order of operations so the grid plugin runs first (not sure if this is feasible or possible) so the containment plugin is getting the full resize request with the grid rounding taken into account. Then make the containment plugin aware of the grid and constrain the resize rounded off to the grid if it would cause the element to go outside its containment.

If changing the order is too difficult or not possible (I'm not sure how that goes with jQuery plugins), then we'd need to make the containment plugin do the grid rounding before it gets to the grid plugin I guess (which would then make the grid plugin do nothing when containment has already been run).

Note: See TracTickets for help on using tickets.