resizing elements on left border causes random jumping

[aeneasr]

I have a resizable div which is float: right. The handler is on the left side. Everything works fine when the handler is on the right side but I'm having some troubles with the one on the right.

The following gif shows two screens. One, where the resizable is floating left and one where it's floating right. The floating left example is included to show you that it generally works.

After some debugging and seeing that it works fine if I scale the inner element only, I believe that the issue is caused because the origin of the element wrapping resizeable (which is top left I guess?) changes:

In pseudocode, the react structure of the borken example is:

<div width="123px" float="right">
  <ReactResizable>
      <children />
  </ReactResizable>
</div>

The react structure of the example without jumping is:

<div float="right">
  <ReactResizable>
    <div width="123px">
      <children />
    </div>
  </ReactResizable>
</div>

The cause for the jumping is that in onResize(event, { size }) { console.log(size) }, size.width fires random widths, as seen in the console:

So - how is it possible to resize an element to the right?

[aeneasr]

deltaX in resizeHandler is jumping around between negative and positive values when the issue occurs:

This does not happen when dragging an object on the right side, which is working fine:

[aeneasr]

upstream react-grid-layout/react-draggable#170

[aeneasr]

when min/maxConstraints isn't set, the flickering occurs. When min/max is set, size.width is always 0 in onResize(event, { size })

[aeneasr]

This will be resolved once https://github.com/mzabriskie/react-draggable sees it's 2.1.3 release :)

[AnandMathew]

hey @aeneasr, when the div is floated right (the resizing handle bar is on the left) and you drag the handle to the left, does the div increase in the left or right side?
Seems to me that in the first gif, the div increases in the same direction that you are pulling, while in the second gif, the div increases in the opposite direction that you are pulling!

Also, did you use css to shift the handlebar from the right side to the left side?

[PovarovDenis]

For those who has same problem:
add draggableOpts={{offsetParent: document.body}} to ResizableBox
Good luck 👍

[msueping]

I'm having the random jumping issue too on a div where the resize handle is on the right (and is the only one). I've also noticed that it only happens when I have the className="box" applied to the ResizableBox. Without that class there's no problems but I need it in order to use the CSS that hides the handles until the element is hovered over.

Using the suggestion above about adding a draggableOpts={{offsetParent: document.body}} to the ResizableBox solved the random jumping troubles. THANKS @PovarovDenis

UPDATE: I was wrong. This did not help with the random jumping that I see when I try to resize while having the class named "box" that toggles the handles.