CODEWITHSUNDEEP
javascriptjquerycsshtmltextarea
arthur.sw
arthur.sw

Reputation: 11619

Resize textarea programmatically without modifying min-size

As you can see here, the textarea won't resize under 100px*100px. Apparently, it's the normal behaviour.

But how can I initialize a textarea to a custom size, and then let the user resize it at the size he wants afterwards (bigger AND smaller) without using jQuery ui?

The only way seems to be using the mouse down/move/up events, right?

Here is a related question (with no related answers).

Upvotes: 0

Views: 437

Answers (2)

SW4
SW4

Reputation: 71150

In Chrome, you cant resize a textarea to a size smaller than its original height and width.

This is actually specified in the W3C specifications, which disctates browsers can defined such characteristics:

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

That said, this has also been raised as a bug in Chrome

You can, however, override this using Javascript, simply give your textarea the class resizable and add the below to your page:

Demo Fiddle

function resizableStart(e){
    this.originalW = this.clientWidth;
    this.originalH = this.clientHeight;
    this.onmousemove = resizableCheck;
    this.onmouseup = this.onmouseout = resizableEnd;
}
function resizableCheck(e){
    if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) {
        this.originalX = e.clientX;
        this.originalY = e.clientY;
        this.onmousemove = resizableMove;
    }
}
function resizableMove(e){
    var newW = this.originalW + e.clientX - this.originalX,
        newH = this.originalH + e.clientY - this.originalY;
    if(newW < this.originalW){
        this.style.width = newW + 'px';
    }
    if(newH < this.originalH){
        this.style.height = newH + 'px';
    }
}
function resizableEnd(){
    this.onmousemove = this.onmouseout = this.onmouseup = null;
}
var els = document.getElementsByClassName('resizable');
for(var i=0, len=els.length; i<len; ++i){
    els[i].onmouseover = resizableStart;
}

Upvotes: 1

Vishal Khode
Vishal Khode

Reputation: 841

Textarea has attribute rows and cols. Try to define this as per your custom size.. i.e.

<textarea rows="4" cols="50">
I am 4 rows and 50 columns textarea..
</textarea>

Upvotes: 0

Related Questions