Как я могу использовать CSS `resize`, чтобы изменить размеры элемента до высоты / ширины меньше, чем начальная высота / ширина в Chrome?

Я только что видел это на Chromium

  • Я не могу изменить размер элемента на высоту меньше его начальной высоты в случае resize:vertical или же resize:both
  • Я не могу изменить размер элемента на ширину меньше его начальной ширины в случае resize:horizontal или же resize:both,

Демо: http://jsfiddle.net/3rdj4/3

Я прочитал спецификации W3C, и я думаю, что проблема возникает из-за этого:

Пользовательский агент может ограничить диапазон изменения размера чем-то подходящим, например, между исходным форматированным размером элемента и достаточно большим, чтобы охватить все содержимое элемента.

Есть ли способ сделать это, даже если Chrome применяет параграф выше?

Примечание: я использую Chromium 30.0.1592.0 (216775)

Источник

4 ответа

Решение

Я скажу нет (т без JavaScript).

Пользовательский CSS, чтобы позволить chrome textarea изменить размер меньше исходного состояния?

Тот факт, что вы не можете изменить размер текстовой области в соответствии с ее начальными размерами, описывается как ошибка ( https://code.google.com/p/chromium/issues/detail?id=94583).

Источник

Решение Javascript:

Демо: 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;
}

Решение выше использует mouseover а также mouseout для запуска resizableStart а также resizableEnd, Проблема заключается в том, что если у изменяемого элемента есть дочерние элементы, то при наведении мыши на дочерний элемент элемент получает mouseout событие, и сразу после этого он получает mouserover событие, которое пузырится от ребенка.

Чтобы избежать этих событий, я реализовал другое решение с mouseenter а также mouseleave События:

Демо: http://jsfiddle.net/nz8ut/3/

Источник

Здесь очень простое решение (может быть переписано на чистом javascript):

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

При первом щелчке исходный размер элемента изменится на меньший, но, поскольку вы все еще удерживаете кнопку, он сразу же восстановит свой размер, а затем вы можете легко изменить размер по своему усмотрению.

'50px', или высота с шириной, конечно, не фиксируется, настройте ее в соответствии с вашими потребностями.

Источник

Как насчет добавления минимальной высоты / максимальной высоты?

Это позволяет установить его за пределы первоначального.

http://jsfiddle.net/Dqxua/

#wrapper {
    min-height:200px;
    max-height: 400px;
    resize: vertical;
    overflow: auto;
    border: 1px solid #000;
}
Источник
Другие вопросы по тегам