Ticket #5817 (closed bug: fixed)

Opened 4 years ago

Last modified 23 months ago

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:
Blocking: Blocked by:

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>

Change History

comment:1 Changed 2 years ago by eromba

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

comment:2 Changed 2 years ago by eromba

Updated test case:

 http://jsbin.com/ulotum/2

comment:3 Changed 2 years ago by scott.gonzalez

  • Milestone changed from TBD to 2.0.0

comment:4 Changed 2 years ago by tj.vantoll

  • Keywords haspatch added
  • Status changed from new to open
  • Summary changed from resize event reports unconstrained ui.size to Resizable: resize event reports unconstrained ui.size when using aspectRatio

Verified this is still an issue in 1.9.1.

comment:5 Changed 23 months ago by mikesherov

#7193 is a duplicate of this ticket.

comment:6 Changed 23 months ago by mikesherov

#4554 is a duplicate of this ticket.

comment:7 Changed 23 months ago by Ethan Romba

  • Status changed from open to closed
  • Resolution set to fixed

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

comment:8 Changed 23 months ago by mikesherov

  • Milestone changed from 2.0.0 to 1.10.0
Note: See TracTickets for help on using tickets.