How to make an entire side of a div resizable?

user_9747630 0
Viewed 1288

I am currently aware of the resize handle appearing at the bottom right of a div with the css property:

resizable: horizontal;

I'm not sure if this a browser only thing but in Firefox, the handle only appears at the bottom-right and only works if we drag that specific portion. If you see any web app, you may see that these apps acheieve the same effect by making an entire side (eg: right) draggable and does not matter if its not on the handle.

To sum up, what I am trying to achieve:

Using vanilla html/css to make an entire side of a div resizable.

For this current case, I cannot use jQuery since this is a React app. Was wondering if this possible through html/css only and not relying on javascript, if not, how do we achieve this in vanilla javascript.

css html javascript
1 Answers

Would something like this work?
https://codepen.io/rod911/details/wvzPjEV

resize.addEventListener("mousedown", function (e) {
   drag = true;
   moveX = e.x;
});

container.addEventListener("mousemove", function (e) {
    moveX = e.x;
       if (drag)
           left.style.width = moveX;
});

You need to js to capture the drag events.

user_100140680
Related