當調整高度時，JQuery UI可調整大小（）會更改寬度

我在調整大小時遇到問題。我使用jQuery .resizable()與以下CSS一個div：當調整高度時，JQuery UI可調整大小（）會更改寬度

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的填充？因爲以前，當沒有填充時，這種「跳躍」的事情就不會發生。現在我無法刪除填充，因爲它真的需要。那麼如何解決這個問題呢？我的意思是有沒有辦法包括填充在JQuery resizable（）？

任何幫助將不勝感激，謝謝...

來源

2012-06-06 ArVan

使用輪廓代替邊框CSS屬性。大綱：1px固體＃800; – ehsan

我認爲這是box-sizing: border-box;和填充的組合。可調整大小的函數失敗，並具有此CSS屬性。

嘗試將方框大小更改爲默認值（box-sizing: content-box），或者爲填充創建一個內部容器。

來源

2012-06-06 09:50:37

我試圖把一個jQuery的可調整大小的jQuery模式對話框內，看到了同樣的問題。我明確地設置了可調整大小的box-sizing：content-box，問題也消失了。 – WigglyWorld

哦，這是一個很好的答案！即使在4年後的今天，答案是有幫助的！非常感謝:) –

如果刪除箱子尺寸屬性是不可能的，就像我的情況一樣，我發現了一個可能有所幫助的不同解決方案。這不是最漂亮的，但它的工作原理。沒有測試確切的代碼，但想法是在調整大小時必須添加填充寬度，然後在停止時將其更改回來。重要提示：如果有可能的元素沒有填充你將不得不增加一個，如果得出結論聲明，如果有設置填充值或不

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); 
} 

});

來源

2013-01-08 05:45:47 user1896534

我有同樣的想法。可調整大小似乎忘記了填充，因此您需要手動將它添加到$ ui.size「start」上。在調整大小時，這就是「調整大小」，我不得不更新元素的大小，但它不能用於上述方法，因爲$ ui.size似乎只用於讀取大小（至少在我的Resizable版本中）。相反，我不得不通過jquery更新$ ui.element：$ ui.element.width（$ ui.size.width）;並在「停止」我不得不添加padTotal，而不是減去它：size = $ ui.size.width + 30;如果這可以幫助任何人... – manu

我知道這是一個老問題，但我碰到的人來，問題，因爲我正在使用基礎庫，它將框尺寸邊框應用於所有元素。您可以通過在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)

遇到錯誤進一步下跌的在可調整大小的對象函數中行。如果有人對此有任何建議，我會很高興聽到他們。

來源

2014-05-15 17:38:31 dtothefp

我們在盒子尺寸：border-box是必須的情況下使用的一種替代方法如下。

在可調整大小的回調實現： 1.在開始，我們把盒子上漿：內容盒 2.在車站，我們將它框調整大小：邊界盒

換句話說，我們在調整大小時暫時將其設置爲默認內容框，以避免使用邊框時可調整大小導致的跳躍行爲。

來源

2015-10-26 00:53:35 Fernando

您可以使用'手柄'參數來處理這個問題。是這樣的： $（「#resizable」）.resizable（{handles：'e，w'}）;

來源

2016-12-20 08:21:08 user7319901

請使用代碼格式。 –

當調整高度時，JQuery UI可調整大小（）會更改寬度

回答

相關問題