JQuery用戶界面可調整+盒大小：邊界盒=身高的錯誤？

我試圖調整與盒大小一個DIV：邊界框; 雖然我只允許調整寬度，DIV每次收縮調整大小事件停止（高度變化）。JQuery用戶界面可調整+盒大小：邊界盒=身高的錯誤？

我的CSS

.test{ 
    width: 200px; 
    height: 100px; 
    border: 1px solid red; 
    box-sizing: border-box; 

}

的Javascript

$(document).ready(function() { 
    $('.test').resizable({handles: 'e', stop: function(event, ui){ 
     $('.wdt').text(ui.size.height); 
    }}); 
});

HTML

<div class="test"> 
    Test 
</div> 
<br/> 
<br/> 
<span>Height =</span> 
<span class='wdt'></span>

調整它，你會看到的。

任何人可以幫助我嗎？ JSFiddle：http://jsfiddle.net/WuQtw/4/

我試過jQuery 1.8.x .. 1.9.x ...沒有什麼變化。我不能使用框大小：內容框。

來源

2013-08-20 Fabio K

我不知道爲什麼它的發生，但似乎你border財產的問題。

如果你希望它的功能一樣，你可以使用outline來代替。

http://jsfiddle.net/WuQtw/10/

.test{ 
    width:200px; 
    height: 100px; 
    outline:1px solid red; 
    box-sizing: border-box; 
}

來源

2013-08-20 20:30:15

如果您在元素上有填充，這不起作用。這個問題與Jquery UI Resizable計算元素寬度的方式有關。 http://bugs.jqueryui.com/ticket/8932 –

很高興知道，謝謝！ –

isthiswhat你正在尋找的寶寶嗎？

只是等待一年的時間更新了jQuery 2.0.2

，然後它的作品

http://jsfiddle.net/WuQtw/37/

//it worked on jsfiddle using jQuery UI 1.10.3 
 
$(document).ready(function() { 
 
    
 
    $('.test').resizable({ 
 
     
 
     stop: function(event, ui){ 
 
     
 
     $('.wdt').text(ui.size.height); 
 
     
 
    }}); 
 
});

.test{ 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="test"> 
 
     Test 
 
</div> 
 
<br/> 
 
<br/> 
 
<span>Height =</span> 
 
<span class='wdt'></span>

來源

2014-11-24 12:30:22

我剛剛發現了同樣的問題，建立這個片段 - 可能有助於某人。

// initiate correction 
var iHeightCorrection = 0; 

var oElement = $('#elementToResize'); 

// init resize 
oElement.resizable({ 
     handles: 's', 
     minHeight: 30, 
     // on start of resize 
     start: function(event, ui) { 
      // calculate correction 
      iHeightCorrection = $(oElement).outerHeight() - $(oElement).height(); 
     }, 
     // on resize 
     resize: function(event, ui) { 
      // manual correction 
      ui.size.height += iHeightCorrection; 
     }, 
     // on stop of resize 
     stop: function(event, ui) { 
      // reset correction 
      iHeightCorrection = 0; 
     } 
    });

Fiddle

來源

2016-11-16 13:59:19 exxecc

我解決了包裝的元素髮出類似。使用邊框爲0的div來包裝原始元素。

.wrapperDiv { 
    position:absolute; 
    height:100px; 
    width:100px; 
    border: 0px; 
} 

.innerDiv{ 
    height:100%; 
    width:100%; 
    background-color:rgba(0,0,0,0); 
    border: 3px solid gold; 
    border-radius: 5px; 
    box-sizing: border-box 
} 
... 
var tSelectionDiv = $('<div class="wrapperDiv"><div class="innerDiv"></div></div>'); 
... 
tSelectionDiv.resizable({ 
    handles: 'e, w', 
    containment:someContainerElement 
});

來源

2017-01-03 20:19:29 Dave

JQuery用戶界面可調整+盒大小：邊界盒=身高的錯誤？

回答

相關問題