#3124 closed bug (worksforme)

Opened July 22, 2008 11:00PM UTC

Closed November 08, 2012 03:28AM UTC

Resizable element within Iframe jumps/shifts during resize

Reported by: rbudiantara@netsimplicity.com Owned by: eduardo
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.5.1
Keywords: iframe, resizable Cc: rbudiantara@netsimplicity.com
Blocked by: Blocking:
Description

The iframe have horizontal and vertival scrollbars. After I scrolled the iframe, every time I started resizing the element, the element shifted lower and to the right. I think it shifted by how far the element is from the upper right hand corner. This happens on Internet Explorer 7.0.6000.16643 on Windows Vista Business Edition

Thanks for the help

Sample Code

-- content of parent.htm 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
    <iframe id="ChildFrame" name="ChildFrame" src="child.htm" style="width:270px; height:270px"></iframe>

</body>
</html>

-- Content of child.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script src="jquery.ui.all.js"></script>
</head>
<body>

<div id="MoveableElement" style="position:absolute;left:200px;top:200px; background-color:yellow; width:150px; height:100px; border-style:solid; border-color:black;" >
    <div id="HeaderTitle" style="background-color:green; ">Header Title</div>

</div>
<script language="javascript">
  $(document).ready(function(){
       
       $("#MoveableElement").resizable( { 
            handles: "se"
       });
  });
  </script>
</body>
</html>

--

Attachments (0)
Change History (6)

Changed August 17, 2008 10:09AM UTC by Cloudream comment:1

milestone: → TDB
priority: major → minor

Changed January 02, 2009 02:55PM UTC by scottgonzalez comment:2

milestone: TBD → 1.6

Changed March 08, 2009 02:32PM UTC by rdworth comment:3

milestone: 1.7 → 1.8

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

milestone: 1.9.0 → 2.0.0

Changed November 04, 2012 03:15AM UTC by mikesherov comment:5

description: The iframe have horizontal and vertival scrollbars. After I scrolled the iframe, every time I started resizing the element, the element shifted lower and to the right. I think it shifted by how far the element is from the upper right hand corner. This happens on Internet Explorer 7.0.6000.16643 on Windows Vista Business Edition \ \ Thanks for the help \ Sample Code \ -- content of parent.htm \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \ <html xmlns="http://www.w3.org/1999/xhtml" > \ <head> \ <title>Untitled Page</title> \ </head> \ <body> \ <iframe id="ChildFrame" name="ChildFrame" src="child.htm" style="width:270px; height:270px"></iframe> \ \ </body> \ </html> \ \ -- Content of child.htm \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \ <html xmlns="http://www.w3.org/1999/xhtml" > \ <head> \ <title>Untitled Page</title> \ <script src="http://code.jquery.com/jquery-latest.js"></script> \ <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script> \ <script src="jquery.ui.all.js"></script> \ </head> \ <body> \ \ <div id="MoveableElement" style="position:absolute;left:200px;top:200px; background-color:yellow; width:150px; height:100px; border-style:solid; border-color:black;" > \ <div id="HeaderTitle" style="background-color:green; ">Header Title</div> \ \ </div> \ <script language="javascript"> \ $(document).ready(function(){ \ \ $("#MoveableElement").resizable( { \ handles: "se" \ }); \ }); \ </script> \ </body> \ </html> \ -- → The iframe have horizontal and vertival scrollbars. After I scrolled the iframe, every time I started resizing the element, the element shifted lower and to the right. I think it shifted by how far the element is from the upper right hand corner. This happens on Internet Explorer 7.0.6000.16643 on Windows Vista Business Edition \ \ Thanks for the help \ Sample Code \ -- content of parent.htm \ {{{ \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \ <html xmlns="http://www.w3.org/1999/xhtml" > \ <head> \ <title>Untitled Page</title> \ </head> \ <body> \ <iframe id="ChildFrame" name="ChildFrame" src="child.htm" style="width:270px; height:270px"></iframe> \ \ </body> \ </html> \ \ -- Content of child.htm \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \ <html xmlns="http://www.w3.org/1999/xhtml" > \ <head> \ <title>Untitled Page</title> \ <script src="http://code.jquery.com/jquery-latest.js"></script> \ <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script> \ <script src="jquery.ui.all.js"></script> \ </head> \ <body> \ \ <div id="MoveableElement" style="position:absolute;left:200px;top:200px; background-color:yellow; width:150px; height:100px; border-style:solid; border-color:black;" > \ <div id="HeaderTitle" style="background-color:green; ">Header Title</div> \ \ </div> \ <script language="javascript"> \ $(document).ready(function(){ \ \ $("#MoveableElement").resizable( { \ handles: "se" \ }); \ }); \ </script> \ </body> \ </html> \ }}} \ --

Changed November 08, 2012 03:28AM UTC by tj.vantoll comment:6

resolution: → worksforme
status: new → closed

Thanks for taking the time to contribute to the jQuery UI project! I ported this example over to jsFiddle - http://jsfiddle.net/tj_vantoll/B7C7r/. I cannot recreate the problem described with the most recent version of jQuery UI (1.9.1) on the latest Chrome nor IE7 via BrowserStack.

If you have any additional information on how we can recreate this issue please let us know so we can reinvestigate.