JQuery UI resizable() 在调整高度时改变宽度答案

【问题标题】：JQuery UI resizable() changes width when resizing the heightJQuery UI resizable() 在调整高度时改变宽度
【发布时间】：2012-06-06 09:42:57
【问题描述】：

我在调整大小时遇到问题。我在具有以下 css 的 div 上使用 JQuery .resizable()：

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() 现在只是在控制台中记录一些内容。

现在，当我试图通过拖动它的ui-resizable-s 侧来更改 div 的高度时，它会自动将 div 的宽度更改为大约30px。每次我开始拖动时都会发生这种情况。因此，每次都会丢失所需的宽度。更改宽度时，高度也会发生同样的情况。

现在我想知道这是不是因为我的 div 有填充？因为在之前，没有 padding 的时候，这种“跳跃”的事情是不会发生的。现在我无法删除填充，因为它确实需要。那么如何解决这个问题呢？我的意思是有没有办法在 JQuery resizable() 中包含填充？

任何帮助将不胜感激，谢谢...

【问题讨论】：

使用轮廓而不是边框 css 属性。轮廓：1px 实心 #800;

标签： jquery css jquery-ui resizable jquery-resizable

【解决方案1】：

我认为它是box-sizing: border-box; 和填充的组合。 resizable-function 因这个 css-property 而失败。

尝试将 box-sizing 更改为默认值 (box-sizing: content-box)，或者为 padding 制作一个内部容器。

【讨论】：

我尝试将可调整大小的 jquery 放在 jquery 模态对话框中，但遇到了同样的问题。我在 resizable 上明确设置了 box-sizing: content-box，问题也消失了。
哦，这是一个绝妙的答案！即使在这个答案 4 年后的今天，它也很有帮助！非常感谢:)

【解决方案2】：

如果像我的情况那样删除 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); 
}

});

【讨论】：

我也有同样的想法。 Resizable 似乎忘记了填充，因此您需要在“开始”时将其手动添加到 $ui.size。调整大小时，即“调整大小”，我必须更新元素的大小，但它不适用于上述方法，因为 $ui.size 似乎只用于读取大小（至少在我的 Resizable 版本中） .相反，我不得不通过 jquery 更新 $ui.element： $ui.element.width($ui.size.width);在“停止”时，我必须添加 padTotal，而不是减去它： size = $ui.size.width+30;如果这可以帮助任何人......

【解决方案3】：

我知道这是一个老问题，但我遇到了同样的问题，因为我使用的是 Foundation 库，它将 box-sizing 边框框应用于所有元素。您可以通过在 jQuery UI 可调整大小的小部件代码中编辑一行来修复它。修复在

_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 小部件而无需更改核心库，但我还没有完全做到这一点

How to extend a jquery ui widget ? (1.7)

我在可调整大小的对象函数中遇到错误。如果有人对此有任何建议，我会很高兴听到他们的声音。

【讨论】：

【解决方案4】：

我们在 box-sizing:border-box 是必须的情况下使用的一种替代方法如下。

在可调整大小的回调实现中： 1. 在开始我们设置 box-sizing:content-box 2. 在 stop 中我们将其设置回 box-sizing:border-box

也就是说我们在resize的时候暂时把它设置为默认的content-box，以避免在使用border-box时resizeable引起的跳跃行为。

【讨论】：

【解决方案5】：

您可以使用 'handles' 参数来处理这个问题。像这样：

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

【讨论】：