What's the best practice for creating resizable panels/splitters?

Ask us anything How do I?
1

Hi everyone,

I’m working on creating a layout with two panels that can be resized by dragging a splitter between them, much like the UI in the WeWeb editor, which allows you to minimize or extend the editor’s width.

Thanks!

2

hi @tomerer2000 ,

have you seen this approach?

1 Like
3

hey @Batik_Okazov
It’s looking good i would try it.
Cheers

1 Like
4

I just found an easier way I just put this code in the container CSS:
.container {
resize: both;
overflow: auto;
}

And it makes you container resizable, I would need to find a way to save it but it’s good for now for me.

1 Like
5

Hi @tomerer2000 ,

This sound good but I can’t get it to work.. do you know what’s going wrong here? → I put the code in here (screenshot) and then I try to grab the edge of the container to move - but nothing happens (in preview mode):

image
image357×345 14.9 KB

6

Hey @thijs,
Ensure you’ve placed the code inside a container, not an input or another type of element.

7

Hey @flo, following up on our office hours discussion, here’s the post about creating flexible containers. If you’ve figured out a way to save the changes, when using the simple CSS code it would be great.
Thanks so much!