Custom CSS to allow chrome textarea resize smaller than initial state?

Question

I like Chrome\'s nifty textarea resize control. However, the one exception is that the textarea appears to have a hard min-height/min-width setting that\'s not changeable vi

Answer 1

Here's the answer you're looking for. This is my original solution, so you've seen it here first!!

The code I've done below is in its most basic form. I've simplified it to remove the Javascript library I'd normally use along with other custom stuff I'd have to explain. This is the solution without needing any external libraries etc.

HOW IT WORKS?

It adds an interval that checks to see if the textarea size has changed whilst the mouse cursor is over it. If it changes we know the user dragged so we force the textarea size to be 1px by 1px. This creates a very slight flicker for the user, but because they are dragging the size instantly goes back to the size they are dragging it to, only now, it will shrink all the way down to 1px by 1px.

THE CODE

Demo: http://jsfiddle.net/greatbigmassive/zJ4z5/5/

function TA_start(id){
var ta = document.getElementById(id);
if(typeof(ta.resizeCheckStarted) == "undefined"){
    ta.resizeCheckStarted = true;
    ta.resizeUpdated = false;
    var cs = window.getComputedStyle(ta,null);
    ta.originalH   = cs.getPropertyValue("height");
    ta.originalW   = cs.getPropertyValue("width");
    ta.originalM   = cs.getPropertyValue("margin");
    ta.style.width = ta.originalW;
    ta.style.height= ta.originalH;
    ta.style.margin= ta.originalM;
    ta.resizeCheck = setInterval("TA_checkMe('"+id+"')",100);
 }
 }

function TA_checkMe(id){
 var ta = document.getElementById(id);
 if(ta.originalW != ta.style.width || ta.originalH != ta.style.height){
    ta.resizeUpdated = true;
    ta.originalW = ta.style.width;
    ta.originalH = ta.style.height;
    ta.style.width="1px";
    ta.style.height="1px";
    clearInterval(ta.resizeCheck);
 }
}

function TA_stop(id,init){
 var ta = document.getElementById(id);
 if(typeof(init)=="undefined"){
    if(typeof(ta.stopResizeCheck)=="undefined"){
        ta.stopResizeCheck = setTimeout("TA_stop('"+id+"',true)",500);
    }
 } else {
    clearInterval(ta.resizeCheck);
    if(ta.resizeUpdated != true){
        delete ta.resizeCheckStarted;
    }
 }
}

Fixes:

a). It doesn't shrink first time b). You don't need any additional CSS with it