jQuery UI 1.11.0 Resizable Containment Bug
Width calculation is wrong when containment element is "position: relative" .
I think that it is this change cause https://github.com/jquery/jquery-ui/commit/c03cb8079c6984fb9286a64d980d367d86b9cd8b .
However, because I am not familiar with the Javascript, I want to help someone.
HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/base/jquery.ui.all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<div id="container">
<div id="parent">
<div id="child"></div>
</div>
</div>
CSS
#container {
position: relative;
width: 200px;
height: 200px;
margin: 30px 0 0 30px;
border: 1px solid;
}
#parent {
position: relative;
width: 150px;
height: 150px;
background-color: blue;
}
#child {
position: relative;
width: 100px;
height: 100px;
border: 1px solid;
background-color: white;
}
JavaScript
$(document).ready(function () {
$("#child").resizable({
containment: "#parent",
resize: function (event, ui ){
var h = ui.size.height;
var t = ui.position.top;
console.log(h,t);
}
});
});