How to create resizable sections, that can be drag-resized?

Is it possible to create re-sizeable sections (panels) of a web application in plasmic? Meaning a section that the user can simply drag and expand either in the horizontal or vertical direction? My goal is to have a few different sections of the app that are basically re-sizeable by clicking and dragging on the edge of the element, for my particular case I want the user to be able make the main viewing area bigger or smaller at will by dragging the edge of the secondary control area, basically a 2/3 width vertical box and a 1/3 width default that could be adjusted as the user sees fit by dragging the vertical edge between the two. My understanding is that this is possible with CSS resize and I found a couple react libraries that could accomplish this as well, but my goal is to use as much of the plasmic functionality as possible so I wanted to ask if this was possible in plasmic without the use of a custom component and NPM libraries? (I was unable to find this in the docs so far.)

Hi @ill_earthworm, you can add a custom CSS embed (currently from the component store, even though it’s not actually an insertable component) to define a class that uses the CSS resize prop like you mentioned:

.resizable {
  resize: vertical; /* or both or horizontal */
}

And then from that point on, you can set any box’s class to resizable

Let me know if that helps!

https://docs.plasmic.app/learn/custom-css/

Ok i have created and saved the embed CSS file (which i have no idea if that is correct) but anyways on this page it says apply the class to individual elements but for some reason I haven’t been able to find where to apply the class to test this

The docs say apply the class there but that is where I hit the wall so far

Oh yes, they’re under HTML Attributes, which tends to be toward the bottom

image.png

DANG haha sorry I should have found that! i clicked on all the little drop downs except that bottom one