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 ()?

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


jquery css jquery-ui resizable jquery-resizable
person ArVan    schedule 06.06.2012    source источник
comment
использовать контур вместо свойства css границы. контур: 1px solid # 800;   -  person ehsan    schedule 07.12.2013

Ответы (5)


arrow_upward
21
arrow_downward

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

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

person Bastian Rang    schedule 06.06.2012
comment
Я попытался поместить jquery с изменяемым размером внутри модального диалогового окна jquery и увидел ту же проблему. Я явно установил box-sizing: content-box на изменяемый размер, и проблема тоже исчезла. - person WigglyWorld; 19.03.2015
comment
О, это был блестящий ответ! Даже сегодня, спустя 4 года после этого ответа, это полезно! большое спасибо :) - person Rahul Dole; 04.08.2016

arrow_upward
2
arrow_downward

если об удалении свойства 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); 
}

});
person user1896534    schedule 08.01.2013
comment
У меня была примерно такая же идея. Resizable, похоже, забывает отступы, поэтому вам нужно добавить его вручную в $ ui.size при запуске. При изменении размера, то есть при изменении размера, мне пришлось обновить размер элемента, но он не работал с указанным выше методом, поскольку $ ui.size, похоже, используется только для чтения размера (по крайней мере, в моей версии Resizable). Вместо этого мне пришлось обновить $ ui.element через jquery: $ ui.element.width ($ ui.size.width); и на остановке мне пришлось добавить padTotal, а не вычитать его: size = $ ui.size.width + 30; Если бы это могло кому-нибудь помочь ... - person manu; 19.05.2015

arrow_upward
1
arrow_downward

Я знаю, что это старая проблема, но я столкнулся с той же проблемой, потому что я использую библиотеку 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)

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

person dtothefp    schedule 15.05.2014

arrow_upward
0
arrow_downward

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

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

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

person Fernando    schedule 26.10.2015

arrow_upward
0
arrow_downward

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

$( "#resizable" ).resizable({handles: 'e,w'});
person user7319901    schedule 20.12.2016