#3635 closed bug (duplicate)

Opened December 02, 2008 07:54PM UTC

Closed November 04, 2012 05:08PM UTC

Resizable: Scrolling causes resizable element to jump around

Reported by: aeternitas103 Owned by:
Priority: major Milestone: 2.0.0
Component: ui.resizable Version: 1.6rc2
Keywords: scroll resize Cc:
Blocked by: Blocking:
Description

Hi,

I have a similar Problem like the Bug 3074. When i scroll to the right and Resize, the div jumps around.

When i delete the outer Div, like this, it works fine.

<div style="width: <?php echo $styleWidth; ?>; height: 800px; background-image: url('media/img/grid/grid.jpg');">
		
  <div class="example dropMe" style="position: absolute; left: 25px; top: 31px; width: 25px; height: 30px; background-color: red;">
      <a href="#">a</a>
  </div>
  <div class="example dropMe" style="position: absolute; left: 0px; top: 31px; width: 25px; height: 30px; background-color: green;">      
  </div>

</div>

Here my Code


<html>
  <head>
    <title>Demo</title>

      <link rel="stylesheet" href="js/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

      <script src="js/jquery-1.2.6.js"></script>
      <script src="js/ui/ui.core.js"></script>
      <script src="js/ui/ui.dialog.js"></script>
      <script src="js/ui/ui.resizable.js"></script>
      <script src="js/ui/ui.draggable.js"></script>
      <script src="js/ui/ui.droppable.js"></script>
      <style>

      </style>

      <script>

        $(document).ready(function()
        {

          $(".example").draggable
          (
            {
              grid: [25,31],
              opacity: 0.8
            }
          );
          $(".example").resizable
          (
            {
              handles:	"e,w",
              autoHide: true,
              grid: [25,0],
              minWidth: 25
            }
          );

          $(".drop").droppable
          (
            {
        	     accept: ".dropMe",
        	     tolerance: "touch",
        	     drop: function(ev, ui)
               {

        	     }
            }
          );


      });
  </script>


  </head>

  <body>

	<div style="border: 1px silver solid; width: 100%; height: 400px; position: relative; left: 0px; top: 0px; overflow: auto;">
		<div style="width: <?php echo $styleWidth; ?>; height: 800px; background-image: url('media/img/grid/grid.jpg');">
		
			<div class="example dropMe" style="position: absolute; left: 25px; top: 31px; width: 25px; height: 30px; background-color: red;">
				  <a href="#">a</a>
			</div>
			<div class="example dropMe" style="position: absolute; left: 0px; top: 31px; width: 25px; height: 30px; background-color: green;"></div>

		</div>

	</div>

  </body>
</html>
Attachments (0)
Change History (8)

Changed January 02, 2009 02:41PM UTC by scottgonzalez comment:1

milestone: TBD → 1.6
priority: minor → major

Changed March 08, 2009 02:33PM UTC by rdworth comment:2

milestone: 1.7 → 1.8

Changed February 25, 2010 03:27AM UTC by frankielaguna comment:3

I was experiencing this issue and upon further investigation I found it was related to lines: 223 to 225 which is a bugfix for http://dev.jquery.com/ticket/1749.

To be more specific line 224: el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });

The iniPos.top and iniPos.left which are called from this.element.position() are reporting the wrong positions.

If you replace iniPos.top and iniPos.left with parseInt(el.css('top')) and parseInt(el.css('left'))

The resizable functions as it should.

Hope this helps.

Changed August 30, 2010 12:47PM UTC by robot comment:4

I tried frankielaguna's solution and it works for me. (on Firefox 3.6.8 / Linux)

However I found that changing the line to this also works:

el.css({ position: 'absolute', top: el.position.top, left: el.position.left });

This appears to be more efficient.

Changed September 24, 2010 10:09AM UTC by pbue comment:5

Duplicate of #4166.

This seems a duplicate of the bug above. Since the other has higher priority I mark this one, although this was filed first.

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:6

milestone: 1.9.0 → 2.0.0

Changed November 04, 2012 02:14AM UTC by tj.vantoll comment:7

status: new → open
summary: ui.resizable - Scroll Jump Around → Resizable: Scrolling causes resizable element to jump around

Confirmed this is still an issue in 1.9.1 - http://jsfiddle.net/tj_vantoll/wLrwt/.

Changed November 04, 2012 05:08PM UTC by tj.vantoll comment:8

resolution: → duplicate
status: open → closed

Duplicate of #3815.This is the same thing as #3815. I'm closing this one in favor of that because #3815 has an active pull request.