Skip to main content

Search and Top Navigation

#9017 closed bug (cantfix)

Opened January 27, 2013 02:15AM UTC

Closed January 28, 2013 03:16PM UTC

When resize "w" or "e" from the left y axis, position of div box is changed - moved

Reported by: arxwn Owned by:
Priority: minor Milestone: none
Component: ui.resizable Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:
Description

When you try to resize "w" or "e" by moving the mouse from the left y axis then the whole box moves from its position. If you do the opposite, resize "e" or "w" by moving the mouse from the right y axis then it behaves correctly, the whole box does not move, it just alters its width!.

Check out demo http://jsfiddle.net/KqAaU/4/

Attachments (0)
Change History (9)

Changed January 27, 2013 02:38AM UTC by tj.vantoll comment:1

Reduced - http://jsfiddle.net/tj_vantoll/54Zc2/. This is happening because of the

margin: auto;
on the resizable element. I'm not sure this is something that resizable can or should support.

Anybody else have thoughts?

Changed January 27, 2013 04:15AM UTC by mikesherov comment:2

TJ, I'm sure you're right, but how does margin: auto cause this bug?

Changed January 27, 2013 01:23PM UTC by tj.vantoll comment:3

Whoops forgot to mention that. If you remove the

margin: auto;
rule or change it to some static value like
50px
in my test case above the problem will go away.

Changed January 27, 2013 02:52PM UTC by arxwn comment:4

The problem will go away if you remove the margin:auto; but what if want, when resizing on the left, the box to resize on the right automaticaaly as happenes on http://jsfiddle.net/KqAaU/4/ ?

So the problem is when margin is set to auto or with % value f.e. 80%

Changed January 27, 2013 03:00PM UTC by arxwn comment:5

Check out this: http://jsfiddle.net/KqAaU/5/

try to resize west. the whole box moves on the left. This happens only on this situation, on the opposite (box be on the left side and resize east) does not happen..

Changed January 27, 2013 06:57PM UTC by tj.vantoll comment:6

Replying to [comment:4 arxwn]:

The problem will go away if you remove the margin:auto; but what if want, when resizing on the left, the box to resize on the right automaticaaly as happenes on http://jsfiddle.net/KqAaU/4/ ? So the problem is when margin is set to auto or with % value f.e. 80%

Percentage based margins work just fine. Your example is still using

margin: auto;
, if I change it to a percentage based value it works fine http://jsfiddle.net/tj_vantoll/fsHVG/.

Changed January 27, 2013 07:06PM UTC by tj.vantoll comment:7

Replying to [comment:5 arxwn]:

Check out this: http://jsfiddle.net/KqAaU/5/ try to resize west. the whole box moves on the left. This happens only on this situation, on the opposite (box be on the left side and resize east) does not happen..

This is a separate issue but it looks the resizable interaction does not handle

right
correctly http://jsfiddle.net/tj_vantoll/3Rzsu/. Draggable has the same problem (see #7772).

Changed January 28, 2013 03:03PM UTC by scottgonzalez comment:8

Yeah, it's impossible to tell how the user has positioned an element. Interactions always assume left/top.

Changed January 28, 2013 03:16PM UTC by mikesherov comment:9

resolution: → cantfix
status: newclosed

Hopefully not forever: http://lists.w3.org/Archives/Public/www-style/2013Jan/0492.html

For now, a workaround would be to set the margin equal to the margin before drag. I think this needs to be marked as "cantfix". Someone else reopen if you disagree.