Opened 11 years ago

Closed 10 years ago

#7126 closed bug (duplicate)

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>

Change History (2)

comment:1 Changed 10 years ago by Scott González

Milestone: 1.9.0 → 2.0.0

comment:2 Changed 10 years ago by tj.vantoll

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/.

Note: See TracTickets for help on using tickets.