Resizable: Containment issue with offset grid dimensions

[Trigle]

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;

[Trigle]

Test Case

[Trigle]

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

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

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

[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?

[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!

[auction123]

The same issue can be found on the actual jQuery example at the moment: ​http://jqueryui.com/demos/resizable/constrain-area.html You can vertically resize beyond the constrained div.

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

[Scott González]

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.

[tj.vantoll]

Verified this is still an issue in 1.9.1 - ​http://jsfiddle.net/tj_vantoll/GRCm6/.

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