Search and Top Navigation
#5817 closed bug (fixed)
Opened July 11, 2010 01:35PM UTC
Closed November 13, 2012 02:43AM UTC
Last modified November 13, 2012 02:45AM UTC
Resizable: resize event reports unconstrained ui.size when using aspectRatio
| Reported by: | ollie2893 | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.10.0 |
| Component: | ui.resizable | Version: | 1.8.2 |
| Keywords: | resize callback haspatch | Cc: | |
| Blocked by: | Blocking: |
Description
Attached is a quick code snippet to illustrate the problem. As you increase the size of the green box, you will notice that it refuses to resize beyond its container, and it preserves the aspectRatio. This is good. But watch at the same time as you drag the resize handle the dimensions reported back in #debug. They keep growing and growing as you keep on dragging even though the green box has ceased resizing. That is, ui.size does not actually report to the event handler the dimensions assigned by ui-resizable.
Although I think this is a major bug, I set priority to "minor" since there is a trivial work-around: do not rely on ui.size but simply read back the CSS attributes instead. Those have been set correctly by ui-resizable just before the event callback.
<style type="text/css">
#container {
background: yellow;
height: 300px;
width: 400px;
}
#box {
background: green;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript">
(function() {
eval(myNameSpace());
$(function() {
var box= $("#box")
.resizable({
aspectRatio: true,
containment: "#container",
resize: function(e,ui) {
$("#debug").text(ui.size.height+" x "+ui.size.width);
}
});
});
})();
</script>
<body>
<div id="container">
<div id="box">
<span id="debug"></span>
</div>
</div>
</body>
Attachments (0)
Change History (8)
Changed July 10, 2012 08:05PM UTC by comment:1
Changed September 15, 2012 08:40PM UTC by comment:2
Updated test case:
Changed October 11, 2012 09:07PM UTC by comment:3
| milestone: | TBD → 2.0.0 |
|---|
Changed October 28, 2012 03:09AM UTC by comment:4
| keywords: | resize callback → resize callback haspatch |
|---|---|
| status: | new → open |
| summary: | resize event reports unconstrained ui.size → Resizable: resize event reports unconstrained ui.size when using aspectRatio |
Verified this is still an issue in 1.9.1.
Changed November 13, 2012 02:43AM UTC by comment:7
| resolution: | → fixed |
|---|---|
| status: | open → closed |
Resizable: Update CSS dimensions selectively. Fixes #7605 - Setting width and height when only one is changing
Resizable: Trigger resize event only when element is resized. Fixes #5545 - Callbacks ignore the grid.
Resizable: Added event tests. Fixes #5817 - resize event reports unconstrained ui.size
Changeset: 3974b55ba5078799df818c78d9273e11d9796ff3
Changed November 13, 2012 02:45AM UTC by comment:8
| milestone: | 2.0.0 → 1.10.0 |
|---|
Here is a JS-Bin version of the test case:
http://jsbin.com/ulotum/#html
I've submitted a pull request with a fix and unit tests here:
https://github.com/jquery/jquery-ui/pull/694