CODEWITHSUNDEEP
javascripthtmlresize
Uli
Uli

Reputation: 2693

How to make a div resizable for users?

What is the simplest way to offer a resize div method for users, such as the StackOverflow text box. Can this be done via HTML only or is JavaScript required? enter image description here

Upvotes: 1

Views: 412

Answers (2)

Quinn
Quinn

Reputation: 458

DEMO FIDDLE (2 and 3)

  1. If you want it to look and behave exactly like the textarea in SO, then you definitely need JavaScript. More info here.

  2. If you just want a simple realizable div to display text, this should be sufficient:

HTML

<div class="display-info">Resizeable div</div>

CSS

.display-info {
    resize: vertical;
    overflow:auto; 
    width: 250px; 
    height: 50px;
    border: 1px solid gray;
    background-color: lightgray;
}

3. If you want a textarea that allows users to type something in it (For eg: a form):

HTML

<textarea name="test" id="test" cols="30" rows="10">Text area</textarea>

CSS

#test {
    resize: vertical; /* can on be resized vertically*/
}

Upvotes: 2

nicael
nicael

Reputation: 19024

<div style="resize:vertical;overflow:auto;"></div>

Did you mean this?

Upvotes: 2

Related Questions