How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

Question

I have just seen that on Chromium

• I can\'t resize an element to a height smaller than its initial height in case of resize:vertical or resiz

Answer 1

I'm gonna say no(t without javascript).

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

The fact you cannot resize a textarea under its initial dimensions is reported as a bug (https://code.google.com/p/chromium/issues/detail?id=94583)

Answer 2

A very simply solution here (can be rewritten in pure javascript):

$("element").mousedown(function() {
    $("element").css({height:'50px', width: '50px'});
});

When you first click, the original size of element will be changed to smaller one, but since you still hold the button - it will restore its size immidiately, and then you can easy change the size however you want.

The '50px', or height with width isn't fixed of course, adjust it after your needs.

Answer 3

A Javascript solution:

Demo: http://jsfiddle.net/nz8ut/2/

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;
}

---

The solution above uses mouseover and mouseout to trigger resizableStart and resizableEnd. The problem is that if the element being resized has childs, when the mouse is placed over a child, the element receives a mouseout event and, just after that, it receives a mouserover event which bubbles from child.

To avoid those events I have implemented another solution with mouseenter and mouseleave events:

Demo: http://jsfiddle.net/nz8ut/3/

Answer 4

How about adding a min-height/max-height?

This allows it to be set beyond the initial.

http://jsfiddle.net/Dqxua/

#wrapper {
    min-height:200px;
    max-height: 400px;
    resize: vertical;
    overflow: auto;
    border: 1px solid #000;
}