2 or more Nested groups layout dynamically inject in PanelGroup then resizable-panels not work.

[eshak-cdda]

I want to make every panel draggable and resizable. ist work 1 layer. if this is nested then it does not work. nested one changing then the upper one is changing her height and width.

[bvaughn]

Sorry, I'm not really sure what you're describing.

Nested groups are supported. You can see an example of how to write the code here:

react-resizable-panels/packages/react-resizable-panels-website/src/routes/examples/Nested.tsx

Lines 24 to 58 in 44d3a65

	function Content() {
	return (
	<div className={styles.PanelGroupWrapper}>
	<PanelGroup className={styles.PanelGroup} direction="horizontal">
	<Panel className={styles.PanelRow} defaultSize={20} minSize={10}>
	<div className={styles.Centered}>left</div>
	</Panel>
	<ResizeHandle className={styles.ResizeHandle} />
	<Panel className={styles.PanelRow} minSize={35}>
	<PanelGroup className={styles.PanelGroup} direction="vertical">
	<Panel className={styles.PanelColumn} defaultSize={35} minSize={10}>
	<div className={styles.Centered}>top</div>
	</Panel>
	<ResizeHandle className={styles.ResizeHandle} />
	<Panel className={styles.PanelColumn} minSize={10}>
	<PanelGroup className={styles.PanelGroup} direction="horizontal">
	<Panel className={styles.PanelRow} minSize={10}>
	<div className={styles.Centered}>left</div>
	</Panel>
	<ResizeHandle className={styles.ResizeHandle} />
	<Panel className={styles.PanelRow} minSize={10}>
	<div className={styles.Centered}>right</div>
	</Panel>
	</PanelGroup>
	</Panel>
	</PanelGroup>
	</Panel>
	<ResizeHandle className={styles.ResizeHandle} />
	<Panel className={styles.PanelRow} defaultSize={20} minSize={10}>
	<div className={styles.Centered}>right</div>
	</Panel>
	</PanelGroup>
	</div>
	);
	}

A demo of that code can be seen here:

https://react-resizable-panels.vercel.app/examples/nested

[eshak-cdda]

Thank you for your response. now we have resolved our problems. we combine this with React DND. Thank you again.