I have just seen that on Chromium
resize:vertical
or resize:both
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)
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)
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With