Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Panel component breaks when given width and height #2330

Open
Unraveler opened this issue Dec 17, 2021 · 1 comment
Open

Panel component breaks when given width and height #2330

Unraveler opened this issue Dec 17, 2021 · 1 comment
Labels

Comments

@Unraveler
Copy link
Contributor

For some reason that is still unknown to me, and was detected during the development process of PR #2329 , When using the Panel component with a defined width and height, a transform class with a translate() method will be added to style (e.g. transform: translate(523px, 584px))

With the latest update of react-rnd 10.2.1 to 10.3.4 this issue persists which probably means the error is coming from the Panel Component. It can also mean that this issue has not been yet addressed in react-rnd which I find strange, since seem to be a rather obvious issue.

As a workaround, adding x and y props with values 1 solves the issue. Maybe that is intended, but it should not be, since it's not obvious at all.

In the following screenshot you can see the difference between having no x, y props (before [left]) and having those defined (after [right]):

Screenshot from 2021-12-17 11-05-43

Before:

<Panel
  style={{position: 'relative'}}
  title="Initial size (673 * 134)"
  resizeOpts={true}
  width={673}
  height={134}
>
  Panel with initial size.
</Panel>

After:

<Panel
  style={{position: 'relative'}}
  title="Initial size (673 * 134)"
  resizeOpts={true}
  width={673}
  height={134}
  x={1}
  y={1}
>
  Panel with initial size.
</Panel>
@dnlkoch
Copy link
Member

dnlkoch commented Mar 3, 2022

See also #812 and #863.

@dnlkoch dnlkoch added the bug label Mar 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants