Resizable splitter panels

Hello, I’m trying to create a splitter panel component, meaning something like this:

I tried to do this creating a template with two containers separated by a vertical “splitter”, and handling the drag event on the splitter to resize the containers.
Unfortunately using this template as a child component of another template or window, I cannot insert components inside its two resizable containers: is there some other way to make it working?

Have you tried using a template repeater or template canvas, and passing a dataset in for each side?

Many thanks for replying! I’ll try this way, I’m not really much familiar with template repeaters, thanks for the hint.

One way I’ve done this is making a container with two containers inside (your left and right side), with a tall skinny rectangle in the middle. Basically, the mousePressed/mouseDragged on the rectangle will use system.gui.transform on both internal containers and the rectangle to change the widths.


@mrogers solution is probably what will get you closest to desired user experience.
The problem with something like a template canvas, which would theoretically support this, is that any change to the layout of the canvas reloads the entire template, which is 1. slow and 2. means you lose any data past initial template state.

I guess I read the question as if they are trying to get this to work in a project or shared template. If that’s the case, I imagine it would be slow, but I don’t know of another way to get a custom set of components into each of the templates containers.

Thank you all for the answers.
@mrogers: your solution is similar to the one I tried to implement and it works (with some slowness problems, just like @PGriffith pointed out). Anyway, what I was trying to do is a reusable component, something that I could drop inside another template or window, and in which I could drop other child components, some sort of of extended version of a Container, is there’s a way to do this?