div resizable like text-area

Question

Browsers allow text-areas to be re-sized by dragging their corner by default. I was wondering if this rule could be applied to other elements (a div for instance). I know this effect could be achieved using the jQuery draggable or the jQuery-ui resizable function, but I would like to do it with plain html / css if it is possible to avoid relying on that library. Are their any CSS rules that I could apply to a div to make it behave in this way?

If you have any other solution I would like to hear it.

Possible duplicate of [Make
resizeable](https://stackoverflow.com/questions/391440/make-div-resizeable) — YakovL, Sep 27 '18 at 15:26

score 78 · Accepted Answer · edited Oct 08 '13 at 21:38

78

Use the css3 resize property.

div {
    resize: both;
}

There is also a resize: horizontal and resize: vertical.

Not currently cross browser http://caniuse.com/#feat=css-resize

edited Oct 08 '13 at 21:38

Fresheyeball

29,567
20
102
164

answered Jun 22 '12 at 20:56

sachleen

30,730
8
78
73

6

This is awesome, unfortunatelly it is not working in any IE version. Is there a way to support such a resise to IE? – Maor Barazany Jan 24 '13 at 00:51
16

you may need to `overflow: auto;` also – HEX Sep 04 '13 at 15:40
1

When I do this all sub-elements also get handles. Why is this? – Nov 12 '13 at 16:03
1

@ErikAigner You need to make your selector more specific, then. – sachleen Nov 15 '13 at 20:41
1

how can I move the resize button to the top left of the div? – SuperUberDuper Mar 30 '15 at 10:53
2

You also have to provide some `overflow` property, like `overflow: hidden`. – icl7126 Oct 04 '15 at 18:26

score 41 · Answer 2 · edited Aug 05 '15 at 12:11

41

You can do this using CSS3. You can create a user resizable div tag by setting the resize and overflow styles. I have set resize to both horizontal and vertical here:

.isResizable {
  background: rgba(255, 0, 0, 0.2);
  font-size: 2em;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
  width: 160px;
  height: 120px;
  min-width: 120px;
  min-height: 90px;
  max-width: 400px;
  max-height: 300px;
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>

edited Aug 05 '15 at 12:11

tvkanters

3,519
4
29
45

answered Jun 22 '12 at 20:58

Eswar Rajesh Pinapala

4,841
4
32
40

6

Great answer. Any chance you know if it's possible to do without jquery the same but making the grip you click to resize, the whole side of a div? Like on stackoverflow when you post a topic the whole bottom can be taken. – Ced Sep 08 '15 at 18:18

div resizable like text-area

2 Answers2

Linked