Support a 3rd pane?

[davidworkman9]

I don't know how hard it would be but it would be nice if there could be more than 2 panes.

[tomkp]

Your best bet is to nest the panes.. I've updated the examples to include one for 3 vertical panes.... (https://github.com/tomkp/react-split-pane/blob/master/demo/Examples.js)

Here's it in action: (http://react-split-pane.surge.sh/multiple-panes-vertical.html)

This is the corresponding code...

<SplitPane split="vertical" defaultSize="33%">
            <div></div>
            <SplitPane split="vertical" defaultSize="50%">
                <div></div>
                <div></div>
            </SplitPane>
        </SplitPane>

Hope this helps...

[davidworkman9]

Thanks! I tried that, and ended up with a ton of scroll bars. I must have some CSS stuff to sort out. Is there a way to make the 2nd pane shrink when the first is resized, but leave the 3rd alone?

What I want is pretty much this (excluding the top and bottom pieces): http://layout.jquery-dev.com/demos/simple.html

[eduedix]

I would also be interested in that.

[greggman]

The problem with nesting panes is resizing doesn't work intuitively at all. Let's say I have 3 panes

  +-----+-----+-----+
  |  A  |  B  |  C  |
  +-----+-----+-----+

And lets say it's split so the outer split is A vs BC and on the right is a nested split for B vs C

So if I drag the sizer between A and B the sizer for C moves. But that's not what pretty much any user wants to happen.

If they move the sizer between A and B it should only make A and B bigger or smaller and not affect C.

The more nested the worse this gets making it very hard to adjust pane sizes.

So, it would be awesome if there was a splitpane with N panes that solved this issue.

PS: I'm not whining just pointing out an possible issue 😅

[wangxuepeng]

Support, this is awesome if it's possible.

[grovesNL]

Came here to mention the same issue as @greggman. It would be great if it's easily solvable.

[leefsmp]

I needed that feature badly, so after hours of research browsing the web, I wrote my own resizable layout component library: react-reflex. That was not easily solvable, as far as I can tell. I appreciate feedback from the community. Thanks!

[vinuthakaranth]

Any updates on this issue/feature? It would be an awesome feature!

[Pet3ris]

Also have this issue!