JQuery UI Resizable + बॉक्स आकार: सीमा-बॉक्स = ऊंचाई बग?

Question

मैं बॉक्स-साइजिंग के साथ एक डीआईवी का आकार बदलने की कोशिश कर रहा हूं: सीमा-बॉक्स; भले ही मैं केवल चौड़ाई को आकार देने की अनुमति देता हूं, फिर भी डीआईवी हर बार आकार बदलता है (आकार परिवर्तन) बंद हो जाता है।

मेरे सीएसएस

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

} 

जावास्क्रिप्ट

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

एचटीएमएल

<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 की कोशिश की ... कुछ भी नहीं बदले। मैं बॉक्स आकार का उपयोग नहीं कर सकता: सामग्री-बॉक्स।

Answer 1

मुझे नहीं पता कि यह क्यों हो रहा है, लेकिन ऐसा लगता है कि आपकी border संपत्ति समस्या है।

यदि आप इसे कार्य करना चाहते हैं, तो आप इसके बजाय outline का उपयोग कर सकते हैं।

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

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

Answer 2

isthiswhat आप बच्चे के लिए देख रहे हैं?

सिर्फ 2.0.2

लिए jQuery अद्यतन करने के लिए एक साल इंतजार करना और फिर इसे

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>

Answer 3

मैं सिर्फ एक ही समस्या की खोज की काम करता है और इस का निर्माण स्निपेट - क्या यह किसी की मदद कर सकता है।

// 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

Answer 4

मैं एक ऐसी ही तत्व लपेटकर द्वारा जारी हल किया। अपने मूल तत्व को लपेटने के लिए 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 
});