Tuesday, 20 August 2013

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

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

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.

No comments:

Post a Comment