react-rnd
react-rnd copied to clipboard
Multiple panels side by side in same container - panel1 resize increases, panel2 resize decreases simultaneously
I think I need help.
Overview of the problem
I'm using react-rnd version 10.1.10
My browser is:
Chrome 84.0.4147.89
I am sure this issue is not a duplicate? yes
Reproduced project
https://codesandbox.io/s/wild-pond-ok4se?file=/src/index.js
With state: https://codesandbox.io/s/flamboyant-sanderson-omueh?file=/src/index.js
Description
Is it possible to have multiple panels side by side in same container - panel1 resize increases, panel2 resize decreases simultaneously. Or When a panel is resized, it will begin to push or pull at its neighbors recursively.
Steps to Reproduce
- First Step: build 2 panels side by side: panel1, panel2
- Second Step: resize panel1 from right edge
- panel1 either resize above or below panel 2, panel 2 does not resize
Expected behavior
Resizing panel1 resize increases from right edge, making panel2 resize reduces from left edge simultaneously. Or, When a panel is resized, it will begin to push or pull at its neighbors recursively.
Actual behavior
panel1 either resize above or below panel 2 based on z-index, panel 2 does not resize
I had the same question too. Was about to open an issue. Were you able to get this to work? If not, did you use a different react component altogether for your project?