调整高度时,JQuery UI resizable()会更改宽度

Question

我在这里有一个调整大小的问题.我正在使用.resizable()以下css的div上使用JQuery :

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()中包含填充？

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

Answer 1

我认为这是box-sizing: border-box;填充和填充的组合.resizable函数因此css属性而失败.

尝试将box-sizing更改为default(box-sizing: content-box),或者为padding创建一个内部容器.