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

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)

+1 for the Q ** I cannot believe actually I'm reading this question... When, when on earth will finally browsers shake-hands? I need another coffee. ** — Roko C. Buljan, Aug 12 '13 at 01:13
There's a solution in this question: http://stackoverflow.com/questions/15146449 — Adam, Aug 13 '13 at 14:32

score 5 · Accepted Answer · edited May 23 '17 at 12:09

5

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)

edited May 23 '17 at 12:09

Community

1
1

answered Aug 12 '13 at 01:18

Lotus

2,596
1
22
20

score 4 · Answer 2 · answered Aug 13 '13 at 17:18

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/

score 0 · Answer 3 · answered May 01 '17 at 22:20

0

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.

answered May 01 '17 at 22:20

Oleg Lopes

1

Tried it and it squashes the area to 50px high if the page is scrollable and a click anywhere in the textarea causes that to happen. So not a solution that works for me. – Keith C Sep 02 '17 at 14:39
You can add a count that only first click will make it 50x50, after that this function will stop to work t.ex. and you can click and type. Not the prettiest solution, but something short. – Oleg Lopes Sep 14 '17 at 08:16

score -3 · Answer 4 · answered Aug 12 '13 at 01:21

-3

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

answered Aug 12 '13 at 01:21

Justice Erolin

2,869
20
19

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

4 Answers4

Linked

Related