Opened 11 years ago

Closed 7 years ago

#3635 closed bug (duplicate)

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;">
    &nbsp;&nbsp;<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;">
				&nbsp;&nbsp;<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>

Change History (8)

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

Milestone: TBD1.6
Priority: minormajor

comment:2 Changed 11 years ago by rdworth

Milestone: 1.71.8

comment:3 Changed 10 years ago by frankielaguna

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.

comment:4 Changed 9 years ago by robot

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.

comment:5 Changed 9 years ago by pbue

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.

comment:6 Changed 7 years ago by Scott González

Milestone: 1.9.02.0.0

comment:7 Changed 7 years ago by tj.vantoll

Status: newopen
Summary: ui.resizable - Scroll Jump AroundResizable: Scrolling causes resizable element to jump around

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

comment:8 Changed 7 years ago by tj.vantoll

Resolution: duplicate
Status: openclosed

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.

Note: See TracTickets for help on using tickets.