Ability to override or disable 'transform' property

burtonator commented 4 years ago

Feature to work around bug.

Overview of the problem

There's a bug with 'bounds' being computed wrong with the latest version and within an iframe:

https://github.com/STRML/react-draggable/issues/363 https://github.com/bokuweb/react-rnd/issues/714

... I could just compute this myself if I could handle onResizeStop and specify position: absolute with top, left, width and height...

BUT react-rnd specifies 'transform' which is what's being computed wrong and I can't override it. IF I specify it in 'style' then it's lost when the component is rendered.

If I could control positioning myself then the problem would be totally solved.

I'm using react-rnd version 10.2.2

My browser is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 polar-desktop-app

I am sure this issue is not a duplicate? YES

PrashantRaj18198 commented 3 years ago

I had the same issue. I found a workaround to this. You can do

.react-draggable {
  transform: none !important;
}

!important is necessary as it seems to ignore the normal transform properties.

iamcrisb commented 1 month ago

you can also do

ref={(node) => {
  const element = node?.getSelfElement();
  if (element) { element.style.setProperty('transform','none','important') }}
}}

bokuweb / react-rnd

Ability to override or disable 'transform' property #732

Overview of the problem