Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 resize:both
  • I can't resize an element to a width smaller than its initial width in case of resize:horizontal or resize:both.

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

I have read w3c spec, and I guess the problem comes because of this:

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.

Is there a way to do it, even if Chrome applies the paragraph above?

Note: I use Chromium 30.0.1592.0 (216775)

like image 292
Oriol Avatar asked Aug 12 '13 01:08

Oriol


2 Answers

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)

like image 63
Lotus Avatar answered Oct 24 '22 06:10

Lotus


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/

like image 23
Oriol Avatar answered Oct 24 '22 07:10

Oriol