Search and Top Navigation
#4286 open bug ()
Opened March 06, 2009 02:27PM UTC
Last modified January 20, 2016 07:08PM UTC
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: |
Description
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)
Change History (12)
Changed March 06, 2009 02:49PM UTC by comment:1
Changed March 06, 2009 11:03PM UTC by comment:2
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.
Changed March 11, 2009 01:00PM UTC by comment:3
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.
Changed April 21, 2009 07:32PM UTC by comment:4
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?
Changed April 29, 2009 02:08PM UTC by comment:5
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!
Changed April 30, 2009 03:38PM UTC by comment:6
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...
Changed May 07, 2009 10:35AM UTC by comment:7
| milestone: | TBD → 1.7.2 |
|---|
Changed May 07, 2009 01:19PM UTC by comment:8
| milestone: | 1.7.2 → 1.8 |
|---|
Changed August 05, 2009 04:45PM UTC by comment:9
| priority: | blocker → major |
|---|
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.
Changed October 11, 2012 02:49PM UTC by comment:10
| milestone: | 1.9.0 → 2.0.0 |
|---|
Changed November 07, 2012 02:39AM UTC by comment:11
| status: | new → open |
|---|---|
| summary: | Constrainment issue with resizable and constraining element left offset → Resizable: Containment issue with offset grid dimensions |
Verified this is still an issue in 1.9.1 - http://jsfiddle.net/tj_vantoll/GRCm6/.
Changed January 20, 2016 07:08PM UTC by comment:12
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).
This issue was also present in 1.6rc5 and 1.6rc6.