JQuery UI resizable() изменяет ширину при изменении высоты

У меня проблема здесь с изменением размера. Я использую JQuery .resizable() на div со следующим css:

div#resizable {
   float: left;
   border: solid 1px white;
   box-shadow: 0px 0px 0px 1px #F2F2F2;
   box-sizing: border-box;
   padding: 15px;
}

Он также содержит множество других элементов div и прочего. Я прилагаю resizable сюда:

$( "#resizable" ).resizable({ minWidth: 200, 
                              maxWidth: 597, 
                              minHeight: 240,
                              resize: widgetResizeListener 
                            });

widgetResizeListener() просто записывает что-то в консоли на данный момент.

Теперь, когда я пытаюсь изменить высоту div, перетаскивая его ui-resizable-s сторона, она автоматически меняет ширину div примерно на 30px, Это происходит каждый раз, когда я начинаю перетаскивать. И поэтому желаемая ширина теряется каждый раз. То же самое происходит с высотой при изменении ширины.

Теперь мне интересно, если это из-за заполнения моего div? Потому что раньше, когда не было прокладок, таких "нервных" вещей не было бы. Теперь я не могу удалить отступы, поскольку это действительно необходимо. Так как же решить эту проблему? Я имею в виду, есть ли способ включить заполнение в JQuery resizable ()?

Любая помощь будет оценена, спасибо...

Источник

5 ответов

Решение

Я думаю, что это сочетание box-sizing: border-box; и обивка. Функция resizable не работает с этим css-свойством.

Попробуйте изменить размер окна по умолчанию (box-sizing: content-box), или сделайте внутренний контейнер для прокладки.

Источник

Если удаление свойства box-sizing невозможно, как в моем случае, я нашел другое решение, которое могло бы помочь. Это не самая красивая, но это работает. Не проверял точный код, но идея в том, что вы должны добавить ширину отступов при изменении размера, а затем изменить его обратно, когда он остановится. ВАЖНО: если это возможно, у элемента нет отступов, вам нужно будет добавить оператор if, чтобы заключить, установлено значение заполнения или нет

var padLeft, padRight, padTotal; // define vars 

$('#resize').resizable({

start: function(event,ui){
   padLeft = this.css('padding-left').replace('px','');
   padRight = this.css('padding-right').replace('px','');
   padTotal = parseFloat(padLeft + padRight);
   ui.size.width = ui.size.width + padTotal;
},
resize: function(event,ui){
   ui.size.width = ui.size.width + padTotal;
},
stop: function(event,ui){
   this.css('width',ui.size.width - padTotal); 
}

});
Источник

Я знаю, что это старая проблема, но я столкнулся с той же самой проблемой, потому что я использую библиотеку Foundation, которая применяет рамку размера окна ко всем элементам. Вы можете исправить это, отредактировав одну строку в коде виджета с изменяемым размером пользовательского интерфейса jQuery. Исправление в

_mouseCapture

И я применил следующий код

var padLeft = el.css('padding-left').replace('px','');
var padRight = el.css('padding-right').replace('px','');
var padTotal = parseFloat(Number(padLeft) + Number(padRight));

this.originalSize = this._helper ? { width: el.outerWidth() + padTotal, height: el.outerHeight() + padTotal } : { width: el.width() + padTotal, height: el.height() + padTotal};

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

Вы можете посмотреть здесь, как редактировать виджет jQuery без необходимости изменять основную библиотеку, но я пока не совсем понял, как это работает

Как расширить виджет JQuery UI? (1.7)

Я получаю ошибки дальше по линии в функциях объекта с изменяемым размером. Если у кого-то есть предложения по этому поводу, я был бы рад услышать их.

Источник

Вы можете использовать параметр "обрабатывает" пользователя для решения этой проблемы. как это:

$( "#resizable" ).resizable({handles: 'e,w'});
Источник

Одна из альтернатив, которую мы использовали в случаях, когда box-sizing:border-box является обязательным, заключается в следующем.

В реализации обратного вызова с изменяемым размером: 1. В начале мы устанавливаем box-sizing:content-box 2. В остановке мы устанавливаем его обратно в box-sizing:border-box

Другими словами, мы временно устанавливаем его в поле содержимого по умолчанию во время изменения размера, чтобы избежать прыжкового поведения, вызванного изменением размера при использовании рамки.

Источник
Другие вопросы по тегам