35n3dg
Last Updated: February 25, 2016
·
4.726K
· simurai
Simurai

Make HTML elements resizable

If you quickly wanna test out or prototype layouts, you can add a resize property (+ overflow) and then you can drag the bottom-right corner.

div {
    resize: both;
    overflow: auto;
}

You can also limit it to only horizontal or vertical resizing. Here the Docs. It basically adds inline width and/or height styles on that element.

Browser support: Unfortunately it doesn't work in all browsers. Also, Chrome and Firefox have a different implementation of the min/max. So it kinda limits this to be used only during development or testing.

See the demo.

Say Thanks
Respond

4 Responses
Add your response

2896
Cory simmons 700

That demo is way more fun than it should be...... :(

over 1 year ago ·
2913

how can we use this in the mobile websites??

over 1 year ago ·
2925
Simurai

@krishyalla I think no mobile browser supports it. I guess you would need to re-create that functionality with JS.

over 1 year ago ·
5637
04009b77308fee0689fdc3fb593f7340

It's a great tip, but IE doesn't support it .

over 1 year ago ·