JQuery UI Resizable + box-sizing: border-box = błąd wysokości?

Question

Próbuję zmienić rozmiar DIV z box-sizing: border-box; Mimo że pozwalam tylko na zmianę rozmiaru, DIV kurczy się za każdym razem, gdy zatrzymuje się zmiana rozmiaru (zmiany wysokości).

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

zmienić jego rozmiar, a zobaczysz.

Czy ktoś może mi pomóc? JSFiddle: http://jsfiddle.net/WuQtw/4/

Próbowałem jquery 1.8.x .. 1.9.x ... nic się nie zmienia. Nie mogę używać box-sizing: content-box.

Answer 1

Nie wiem, dlaczego tak się dzieje, ale wygląda na to, że Twoja właściwość to border.

Jeśli chcesz, aby działał tak samo, możesz zamiast tego użyć outline.

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

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

Answer 2

isthiswhat szukasz dziecka?

tylko czekać rok na aktualizację jQuery 2.0.2

a następnie działa

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

Właśnie odkryłem ten sam problem i to budować snippet - może komuś pomóc.

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

I rozwiązać podobny wydane przez owijanie elementu. Użyj elementu div z ramką 0, aby zawinąć oryginalny element.

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