#3176 open bug ()

Opened August 12, 2008 03:27PM UTC

Last modified March 14, 2016 02:24PM UTC

Resizable: Buggy behavior when trying to make an iframe resizable

Reported by: zibaldon@gmail.com Owned by:
Priority: major Milestone: 2.0.0
Component: ui.resizable Version: 1.5.2
Keywords: resizable iframe handle resize Cc:
Blocked by: Blocking:
Description

When you create an iframe and make it resizable, it has a strange behavior when you try to make it bigger and then smaller. I'll post a code example to make it clear.

You have to create 2 files

Main.html

<!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>Resizable iframe example</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="divFrame" style="width:250px; height:200px">
            <iframe id="ChildFrame" name="ChildFrame" src="child.htm" style="width:100%; height:100%">
            </iframe>
        </div>
        <script type="text/javascript">
            $("#divFrame").resizable({
                handles: 'all'
            })
        </script>
    </body>
</html>

and

Child.html

<!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>Child</title>
    </head>
    <body>
        <div id="justAnElement" style="background-color:yellow; width:150px; height:100px; border-style:solid; border-color:black;">
            <div id="HeaderTitle" style="background-color:red; ">
                Try to resize the iframe
            </div>
            Make it bigger and then smaller
        </div>
    </body>
</html>

Now try to resize the iframe, make it bigger and then smaller moving the mouse quite fast.

You'll notice that the handle of the iframe keep being dragged even if you release the mouse button, besides when trying to make the iframe smaller the handle isn't dragged if the pointer is on the iframe's surface.

This happens on Firefox 3.0.1, IE 7 and Safari 3.1.2

Attachments (0)
Change History (11)

Changed August 12, 2008 04:59PM UTC by Cloudream comment:1

milestone: → 1.6

Changed December 17, 2008 03:26PM UTC by paul comment:2

milestone: 1.6 → 1.next

This is something that can only be fixed with a transparent overlay in top of the iframe during resizing, and such a helper is planned for a release > 1.6.

Changed January 16, 2009 06:08AM UTC by eduardo comment:3

resolution: → wontfix
status: new → closed

When you are over an iframe you loose the focus of the parentWindow. We have no fixes for this now.

Changed January 16, 2009 10:06PM UTC by scottgonzalez comment:4

resolution: wontfix
status: closed → reopened

Paul clearly laid out an idea for how to handle this.

Changed January 17, 2009 03:45AM UTC by rdworth comment:5

Also, until have a fix for something, it should stay open.

Changed January 06, 2010 06:10PM UTC by rodolfo comment:6

I solved it with the eduardo's solution. My code:

  start: function(){
    ifr = $('iframe');
    var d = $('<div></div>');

    $('#content').append(d[0]);
    d[0].id = 'temp_div';
    d.css({position:'absolute'});
    d.css({top: ifr.position().top, left:0});
    d.height(ifr.height());
    d.width('100%');
  },
  stop: function(){
    $('#temp_div').remove();
  }

Changed May 08, 2010 10:50PM UTC by watanabe comment:7

See Ticket #4903

Changed October 03, 2012 03:34PM UTC by scottgonzalez comment:8

milestone: 1.next → 2.0.0
owner: eduardo
status: reopened → assigned

Changed October 03, 2012 03:35PM UTC by scottgonzalez comment:9

status: assigned → open

Changed November 09, 2012 12:53PM UTC by mikesherov comment:10

summary: Buggy behavior when trying to make an iframe resizable → Resizable: Buggy behavior when trying to make an iframe resizable

Changed March 14, 2016 02:24PM UTC by scottgonzalez comment:11

#14929 is a duplicate of this ticket.