Description
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 63F9 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?