DEV Community

Cover image for Making divs user resizable with CSS

Making divs user resizable with CSS

Chris Bongers on December 14, 2020

This article has nothing to do with browser widths and viewport media queries. In this article, we will be talking about the resize css property. ...
Collapse
 
thedamon profile image
Damon Muma

Always fun to find the browser doing a potentially hard thing natively!

I will say it is a shame you can't set which corner the thingy shows on. I want to resize something up that's anchored to the bottom of the screen and the native behaviour for that is quite quite bad unfortunately.

Collapse
 
alexalannunes profile image
Alex Alan Nunes

it's possible I get resize event?

Collapse
 
dailydevtips1 profile image
Chris Bongers

Not sure I understand the question correctly?

Collapse
 
leob profile image
leob

Never heard about this before, eye opener! Just like I also never heard about margin collapse until recently. CSS is such a beast, easy to learn, impossible to master.

Collapse
 
dailydevtips1 profile image
Chris Bongers

You are very right about that, I still find properties or hacks I've never seen before

Collapse
 
leob profile image
leob

Yes it's incredible, CSS must be the single most complicated and vast topic in all of web dev.

I also believe that more and more can be done using only native browser APIs/capabilities - of course at the moment React is very dominant, but as browser capabilities become ever more powerful and standardized, we may reach a point where a framework (like React or Vue) isn't even needed anymore to build frontends, especially if Web Components become good enough.

Yes we've come a long way since the days of IE8 and "quirks mode" :-)

Collapse
 
rabbitzzc profile image
rabbitzzc

how to action to all div, not just border

Collapse
 
dailydevtips1 profile image
Chris Bongers

That won't work with the resize property.
You will need some JavaScript for that

Collapse
 
rabbitzzc profile image
rabbitzzc

sure.

Collapse
 
danieldogeanu profile image
Daniel Dogeanu

I've always set resize: vertical to my textareas to prevent them from breaking the site layout, but I didn't know you could do that on divs.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yeah, same would either turn it off or only vertical.
But can be useful on divs as well.

Collapse
 
aakashgujar profile image
Aakash Gujar

Does it only works on block level elements?

Collapse
 
faisalsaifii profile image
Faisal

Is it possible to get resizability by dragging the sides of the divs like in the Leetcode interface?

Collapse
 
moonlight365 profile image
Ivy M

Is there a way to make this with a vertical separator in between two divs? I can just click the separator and move the mouse and the left and right resizes accordingly?