javascript - How to make an entire side of a div resizable? - Stack Overflow

admin管理员组

文章数量:1289565

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.

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.

• javascript
• html
• css

Share Improve this question Follow edited May 28, 2022 at 15:17 rohanharikr asked Dec 26, 2020 at 13:37 rohanharikrrohanharikr 1,81122 gold badges2020 silver badges3535 bronze badges 10

• 2 Does developer.mozilla/en-US/docs/Web/CSS/resize help? – evolutionxbox Commented Dec 26, 2020 at 13:42
• I checked this out but the problem I am trying to solve here is merely from a user experience perspective. Sure, it works but I am trying to make an entire side resizable, meaninng the user can go on any side and drag to resize rather than just going to the bottom-right resize button. – rohanharikr Commented Dec 26, 2020 at 13:43
• 1 try resize:both div { border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto; } – Sandeepkumar Gupta Commented Dec 26, 2020 at 13:43
• 1 I don't think you can only achieve it using HTML and CSS. Stackoverflow for example uses a div that receives pointer events and then sets the height of the editor explicitly. – marcelwgn Commented Dec 26, 2020 at 13:46
• 2 @GuptaSandeepkumar 's linked solution does not seem to work in edge dev build, I can only resize the element using the small arrow at the bottom right, not an entire side. – marcelwgn Commented Dec 26, 2020 at 14:06

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 9

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 use js to capture the drag events.

本文标签： javascriptHow to make an entire side of a div resizableStack Overflow