JQuery UI Resizable + box-sizing: border-box = height ошибка?

Question

Я пытаюсь изменить размер DIV с помощью рамки: border-box; Даже если я разрешаю изменять ширину, DIV сжимается каждый раз, когда событие изменения размера изменяется (изменения высоты).

Мой 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 ... ничего не меняется. Я не могу использовать размер коробки: контент-бокс.

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 вы ищете ребенка?

просто ждать один год, чтобы обновить 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>

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

я решил аналогичный выданный оберточной элемент. Используйте div с границей 0, чтобы обернуть исходный элемент.

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