Opened 5 years ago

Last modified 5 years ago

#9575 open bug

Resizable & Draggable: Sizing issue with containment

Reported by: kwikness Owned by:
Priority: minor Milestone: none
Component: ui.resizable Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

In a simple page containing an outer div which contains a div that has resizable and draggable applied to it with a containment specified, the resizable/draggable div does not behave appropriately.

Attempting to stretch out the div width-wise causes it to collapse on itself horizontally. Repeating this a number of times eventually reduces the div's width to 0.

Please Note: I've noticed that neither JSFiddle or JS Bin reproduces this behavior similarly to how it behaves within a browser (tested with IE v9, FF v24, Chrome v29), however here are links to JS Bin and the full page:

Although it works a little differently in a browser, you can see the behavior in JS Bin if you first drag the inner div square (white) a few pixels away from the right side of the parent container then try to expand the inner div to the right.

This issue is also present in all previous versions of jQuery UI I've tried.

Change History (3)

comment:1 Changed 5 years ago by tj.vantoll

Component: ui.coreui.resizable
Status: newopen
Summary: Draggable/Resizable div with Containment and Margin Auto Doesn't Behave ProperlyResizable & Draggable: Sizing issue with containment

Reduced this a bit: http://jsbin.com/OLaWUHe/4/edit

This seems to be an issue with resizable as the containment is off by a bit once the draggable element is applied to the same element.

I would've sworn there was a duplicate ticket for this but I can't seem to find one and I can create this way back into 1.8.x. #6939 is similar but a bit different.

comment:2 Changed 5 years ago by kwikness

@tj.vantoll You didn't reduce the code, you removed the div with the auto margin and entirely changed the topic of this bug report! The issue you're reporting is a different bug altogether.

This isn't a bug report for the div not stretching all the way, it's a bug report for the inner resizable/draggable div snapping back to the left when you try to expand it to the right when auto margins are set on an ancestor div!

Please use my original version and test in a browser to see what I mean.

Last edited 5 years ago by kwikness (previous) (diff)

comment:3 Changed 5 years ago by tj.vantoll

Sorry kwikness,

There are really multiple issues going on here. I removed the margin: auto because that's handled by #6641. There's also #6939 which is likely related to this as well. The containment issue was the only unique thing that I saw.

If you'd like to try to separate all these into very reduced cases we'd love the help. We likely won't get around to fixing these issues until our interactions rewrite which is currently in progress lands.

Note: See TracTickets for help on using tickets.