We help IT Professionals succeed at work.

jQuery resizable bug in Opera

josephdaviskcrm
josephdaviskcrm used Ask the Experts™
on
I'm experiencing a problem with the jQuery resizable functionality in Opera only, which is odd.  Usually its IE that gives the problems.  

What I'm experiencing is that during the resize operation, the div tag suddenly increases it's height by a large amount.  After I noticed the problem was occuring in my application I ported it over to this simple example that I have posted here to see if in the most basic circumstance the problem was still occuring, and it is.  I wondered if it was a problem with having draggable and resizable applied to the same div tag, but the problem still occurs when just resizable is applied.

Can someone please:

Verify that this same thing is happening when you run the code below.

Identify a work around that I might be able to implement to get this to work.

Thanks,
<!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 runat="server">
    <title>Opera Test</title>
    <link href="CSS/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="JavaScript/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="JavaScript/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {
        //$('#Mover').draggable({ containment: 'parent', handle: '#Shaker' });
        $('#Mover').resizable();
      });
    </script>
  </head>

  <body>
    <form id="form1" runat="server">
      <div style="position:absolute; width:400px; height:400px; top:50px; left:50px; background-color:#FFDDFF">

        <div id="Mover" style="position:absolute; width:75px; height:75px; top:25px; left:25px; background-color:#DDFFDD">
          <div id="Shaker" style="height:15px; background-color:#AADDAA;"></div>
        </div>

      </div>
    </form>
  </body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

Pls try  to use opera hack  for css if any.
Ya its normally issue of IE

Author

Commented:
I'm not sure what you're talking about.
Hi,

Do you know about css hack for IE.
If yes then in similar way try for opera too.

Author

Commented:
Can you please provide an example?

Author

Commented:
And have you tested the code I posted and verified that this bug is occurring on your end as well?
Opera 10.60 does not seem to have  a problem with dragging

        $('#Mover').draggable({ containment: 'parent', handle: '#Shaker' });
        $('#Mover').resizable();

I uncommented the line where Mover is draggable, resizable does not work. Post the full example.