JQuery UI Resizable + box-sizing: border-box = height error?

Question

I am trying to resize a DIV using box-size: border-box; Even if I allow changing the width, the DIV is compressed every time the resize event changes (height changes).

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

Resize it and you will see.

Can someone help me? JSFiddle: http://jsfiddle.net/WuQtw/4/

I tried jquery 1.8.x .. 1.9.x ... nothing has changed. I can not use box-size: content-box.

Answer 1

I don't know why this is happening, but it seems that your border property is a problem.

If you want it to work the same way, you can use outline .

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

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

Answer 2

I just discovered the same problem and am creating this snippet - maybe this will help someone.

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

Is this what you are looking for for a child?

just wait one year to upgrade jquery to version 2.0.2

and then it works

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 4

I solved a similar version by wrapping the element. Use a div with a border of 0 to wrap the original 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 });