To avoid all of that, we can constrain the width to our minimum and maximum when the user lets go of the mouse. The next time the user tries to drag the pane, it won’t shrink until the excess width is used. Without this, the user can pull their cursor past our maximum width and save an un-useable width. This last line of code will save us from weird behavior that can make the pane feel unresponsive. This wider hidden element helps the user click and drag the smaller-seeming edge. Then we’ll set up a transparent pseudo-element with the cursor we want. We’ll set up a 1px border on the right side to give the user a hint that the handle is there. I also want the mouse cursor to change to an arrow pointing left and right.įor our vertical handle, we want to set the width of the element to 0 and set the height to match the parent element. To make an element wider, I want to be able to click and drag on the right border of the element until I get to the size I want.

I’ve mentioned the “handle” a few times now, but I want to describe what I want it to do. We’ll have to make a handle that we can use, set up our event listeners, and finally, resize our element. I’ll highlight the important parts of getting a width-resize handle to work in this blog post, but the full source code will be included afterward. I want to make a resize handle on the border of an element instead of the corner. The handle is very rigid-it can’t be styled or moved, and the element can only resize when you drag that handle. But you can’t do anything with the left or top side. From there, you can expand or shrink the bottom and right side. The property will add a handle to the bottom right corner of your element. But implementing the feature isn’t as easy as it looks.ĬSS has a built-in resize property, but it’s limited in functionality.

Being able to resize an HTML element is a handy feature.

Resize js