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

Question

I'm trying to resize a DIV with box-sizing: border-box; Even though I only allow resizing the width, the DIV shrinks everytime the resize event stops (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 anybody help me? JSFiddle: http://jsfiddle.net/WuQtw/4/

I tried jquery 1.8.x.. 1.9.x... nothing changes. I cant use box-sizing: content-box.

Answer 1

I don't know why it's happening, but it seems your border property is the issue.

If you want it to function the same, you can use outline instead.

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 build this snippet - may it helps 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

isthiswhat you are looking for baby?

just wait one year to update jquery to 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 issued by wrapping the element. Use a div with a border of 0 to wrap your 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
});

Answer 5

Change from box-sizing: border-box to box-sizing: content-box should works.

JSFiddle: http://jsfiddle.net/WuQtw/65/

Reference: https://bugs.jqueryui.com/ticket/9137