#7126 closed bug (duplicate)

Opened March 17, 2011 08:16AM UTC

Closed October 29, 2012 01:18AM UTC

Resizeable: containment and aspectRation bug

Reported by: anatoly Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.8.10
Keywords: Cc:
Blocked by: Blocking:
Description

There's a bug in Resizeable module when both containment and aspectRation options are used.

The bug appears then edge of resizeable element hits the border of its container.

For quick test check it at http://jsfiddle.net/NJ2mg/1/

Test instructions:

1. Try to move top left handle to container's top left corner.

jQuery version: 1.5.1, jQuery UI version: 1.8.10, 1.8.9, 1.8.7

I'm able to reproduce it in Firefox 3.5.17, Chromium 6.0.472.63 and IE 8

Code example:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/jquery.ui.all.css" type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>

    <script type="text/javascript">
      $(function() {
        $("#resizable").resizable({
          handles: 'ne, nw, se, sw',
          containment: 'parent',
          aspectRatio: true
        });
      });
    </script>


    <style type="text/css">
    #container {
      position: relative;
      width: 600px;
      height: 300px;
      border: 1px solid black;
    }

    #resizable {
      top: 50px;
      left: 50px;
      background: #cec;
      height: 100px;
      width: 200px;
      border: 1px dotted gray;
    }

    .ui-resizable-handle {
      width: 8px;
      height: 8px;
      border: 1px solid rgb(128, 128, 128);
      background: rgb(242, 242, 242);
    }

    .ui-resizable-n, .ui-resizable-s {
      left: 45%;
    }

    .ui-resizable-e, .ui-resizable-w {
      top: 45%;
    }

    .ui-resizable-se {
      bottom: -5px;
      right: -5px;
    }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="resizable" />
    </div>
  </body>
</html>
Attachments (0)
Change History (2)

Changed October 11, 2012 02:52PM UTC by scottgonzalez comment:1

milestone: 1.9.0 → 2.0.0

Changed October 29, 2012 01:18AM UTC by tj.vantoll comment:2

resolution: → duplicate
status: new → closed

Duplicate of #8158.This was fixed in 1.8.19, here's an updated fiddle - http://jsfiddle.net/tj_vantoll/p7Rwb/.